- 질문 게시판입니다.
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


목록
번호 제목 이름 날짜 조회 추천
4192 기타4대 보험 질문 3 사람사람 18/02/21 4091 0
4193 IT/컴퓨터오라클 DB 쿼리문 작성 질문입니다 10 nickyoPD 18/02/21 4458 0
4194 여행도쿄 여행 조언 구합니다. 9 naru 18/02/21 3393 0
4195 진로친구가 자기 일하는회사 오라는데 갈등됩니다. 16 [익명] 18/02/22 2714 0
4196 기타의무교육 가짜광고 엿먹이는 방법이 있을까요? 헬리제의우울 18/02/22 3142 0
4197 IT/컴퓨터자바스크립트 관련 질문입니다 ㅠㅠ 14 nickyoPD 18/02/22 4581 0
4198 연애여성분들 그날에 입맛이 없을 때 그래도 땅기는 음식 있으신가요?? 17 [익명] 18/02/22 8137 0
4199 기타컴퓨터 최종견적입니다(사진 有) 6 김치찌개 18/02/22 4381 0
4200 IT/컴퓨터pc 업글 문의입니다 9 쿠바왕 18/02/23 3676 0
4201 여행혼자 일본여행 도쿄 VS 중소도시 어디가 좋을까요? 8 알프 18/02/23 4059 0
4202 기타종로에 귀금속상가 가격 괜찮나요? 9 까꿍이아빠 18/02/24 4714 0
4203 가정/육아유아 동화책 중고시장도 활성화 되어 있을까요? 11 rehema 18/02/24 3346 0
4204 게임안녕하세요. 모르가나 서포터 템 추천 부탁드립니다. 16 [익명] 18/02/24 2247 0
4205 기타고등어 조기 어느게 비리신가요? 7 Euphoria 18/02/25 3545 0
4206 여행베이징 어떤가요? 3 별빛 18/02/25 2771 0
4207 기타윤서인 만화 내용은 제외하고 순수하게 그림만 보면 어떤건가요? 14 라밤바바밤바 18/02/26 4151 0
4208 홍차넷홍차넷인데 왜 redtea.kr이죠? 10 papaGom 18/02/26 5920 0
4209 경제상가 무상임대 질문합니다 5 [익명] 18/02/27 2338 0
4210 기타립스틱/립글로즈 선물 질문 11 초이 18/02/27 3546 1
4211 기타직장에서의 태도 14 침묵의공처가 18/02/27 3528 0
4212 게임ogn 롤챔스 직관가보신분들 계신가용? 4 얼그레이 18/02/27 3461 0
4213 IT/컴퓨터카카오톡 질문입니다. 13 수박이두통에게보린 18/02/27 3834 0
4214 기타LG TV 질문입니다 3 김치찌개 18/02/27 2447 0
4215 IT/컴퓨터엑셀 허접이 질문하나 드립니다. 2 [익명] 18/02/28 2187 0
4216 기타부담스러운 만남 제의 거절방법.. 25 알료사 18/02/28 7183 0
목록

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

댓글