- 질문 게시판입니다.
Date 18/02/22 13:05:12
Name   nickyoPD
Subject   자바스크립트 관련 질문입니다 ㅠㅠ
코딩 목적: 배열로 들어있는 정보를 C:forEach 를 통해 div 안에 뿌리는데 img 크기가 div보다 클 경우 자동으로 조정해주는 자바스크립트 window.onload를 처리,
클래스 네임 :  .logo => <img src 태그 클래스 네임>, .img <div 태그 클레스 네임>

<----자바스크립트 부분------->

<script>
window.onload = function() {
var divs = document.querySelectorAll('.logo > .img');
for(var i=0; i<=4; i++){
var div = divs[i];
var divAspect = div.offsetHeight / div.offsetWidth;
div.style.overflow = 'hidden';

var img = div.querySelector('.logo');
var imgAspect = img.height / img.width;

if (imgAspect <= divAspect) {
// 이미지가 div보다 납작한 경우 세로를 div에 맞추고 가로는 잘라낸다
var imgWidthActual = div.offsetHeight / imgAspect;
var imgWidthToBe = div.offsetHeight / divAspect;
var marginLeft = -Math
.round((imgWidthActual - imgWidthToBe) / 2)
img.style.cssText = 'width: auto; max-height: 100%; margin-left: '
+ marginLeft + 'px;'
} else {
// 이미지가 div보다 길쭉한 경우 가로를 div에 맞추고 세로를 잘라낸다
img.style.cssText = 'max-width: 100%; height: auto; margin-left: 0;';
}
}
};
</script>

<------데이터 표시 부분 -------->

<c:forEach items="${JobPost_Main }" var="JobList">
<div class="four wide column" style="border: 1px solid black; text-color: black;">
<div class="ui centered fluid card">
<div class="img">
      <a href="${conPath }/JobPostContentView.do?postNo=${JobList.postNo}">
                                     <img src="${conPath }/CompanyLogoImage/${JobList.postCompanyLogo}" class="logo" /></a>
        </div>
</div>
</div>
</c:forEach>


입니다. 자바스크립트에서 for문이랑 divs 선언을 빼고 document.queryselector 로 클래스 네임을 받아서 돌리면 첫번째 이미지까지는 해결이 되는데 배열로 정보를 받아오는거라 4번째까지 해결하려면 자바스크립트에서 받은 클래스 정보를 배열에 넣고 해야하는데 ㅠㅠ 아무리 이리저리해봐도 해결이 안됩니다.. 도와주세요..



0


목록
번호 제목 이름 날짜 조회 추천
공지 질문 게시판 이용 규정 11 토비 15/06/19 22548 4
15728 기타치아를 물티슈로 닦아도 괜찮나요? 3 + Hard Rock Cafe, 24/03/29 167 0
15727 기타만화를 찾습니다. 7 whenyouinRome... 24/03/28 299 0
15726 IT/컴퓨터클리앙 난민들은 보시오 26 헬리제의우울 24/03/28 1290 2
15725 경제엔화 신권 1 2024 24/03/27 318 0
15724 기타강남 인근 좋은 식당 추천 부탁드립니다. 2 아이캔플라이 24/03/27 309 0
15723 의료/건강제가 잘못알고 있었나요? 약먹으면 일주일 안먹으면 7일 아니였읍니까??? 10 허윤진남편 24/03/26 761 0
15722 기타모자 보관함 질문입니다 김치찌개 24/03/26 165 0
15721 문화/예술종로3가 이북에서 8인 이하로 맥주 즐길 수 있는 곳 어딜까요? 2 化神 24/03/26 374 0
15720 IT/컴퓨터카카오톡에서 엑셀 붙여넣을때? 13 매뉴물있뉴 24/03/25 612 0
15719 경제코인과 주식 차트 지표 추천 받습니다 6 마우스노동러 24/03/25 472 0
15717 가정/육아제가 지금 좀 위태로운 상태인 것 같습니다. 11 [익명] 24/03/24 1355 0
15715 문화/예술수호지나 초한지 드라마 추천 받습니다. 1 mathematicgirl 24/03/23 171 0
15714 기타성시경 막걸리(경탁주) 드셔보신분 계시읍니까? 5 Groot 24/03/22 458 0
15713 연애사내 연애 빌드업 질문입니다. 7 [익명] 24/03/22 817 0
15712 의료/건강개한테 물렸습니다. 9 얌전한 고양이 24/03/21 639 0
15711 IT/컴퓨터에어팟 선물 2 카라멜마끼아또 24/03/21 321 0
15710 경제국제경제를 슬슬 볼 만한 유튜브 등이 있을까요? 4 골든햄스 24/03/20 624 0
15709 체육/스포츠주 5일 3KM 달려도 될까요? 10 활활태워라 24/03/20 631 0
15707 진로공무원 이직 관련 문의드립니다. 6 [익명] 24/03/20 740 0
15706 IT/컴퓨터사설에서 아이폰 배터리 교체시에 암호를… 3 마우스노동러 24/03/19 367 0
15705 법률부모님이 이혼하셨는데 재산분할 관련 질문입니다. 2 [익명] 24/03/19 655 0
15704 과학차 블박 usb 연결부위가 너무 민감해서 자꾸 후방카메라 연결이 끊깁니다 1 2024 24/03/19 234 0
15703 의료/건강수면다원검사를 받아보려고 합니다. 6 자몽에이슬 24/03/19 275 0
15702 경제m포인트 질문임당… 12 Echo-Friendly 24/03/19 377 0
목록

+ : 최근 2시간내에 달린 댓글
+ : 최근 4시간내에 달린 댓글

댓글