채택완료

javascript 로 img의 style를 수정하는 방법에 관하여 질문드려요..

안녕하세요. 

고수님들께 질문을 좀 드려요.

바쁘신 시간이겠지만, 좀 알려주시면 대단히 고맙겠습니다. 

  

javascript 를 이용하여 

Copy
<div id="item_explan">    <img alt="" src="/upload/images/2948937941_1448086749.jpg" style="height:1088px; width:725px" /></div>

div(레이어) #item_explan 내의 img의 style을 강제로 style="height:auto; width:100%"

Copy
<div id="item_explan">    <img alt="" src="/upload/images/2948937941_1448086749.jpg" style="height:auto; width:100%" /></div>

수정하려면 어떻게 js를 써야 할까요?

바쁘신 시간이겠지만, 고수님들 좀 알려주시면 대단히 고맙겠습니다 ^0^

답변 3개 / 댓글 3개

채택된 답변
+20 포인트

Copy
<script type="text/javascript">$(function() {    $("#item_explan").children("img").css({width:"100%", height:"auto"});});</script>

 

그누보드5면 jquery 사용하시는 게 편하실 겁니다. 

답변에 대한 댓글 1개

덕분에 잘 해결할수 있을 것 같습니다.
감사합니다 ^^

두분께서 알려주신 방법대로 하면 바로 해결이 될것 같기도 한데요.. 

이미지 크기가 그대로 보여지네요.

혹시 item_explan div내에 table이 들어있고 그속에 또 div 하나가 들어가 있어서 그럴까요? ㅎㅎ 

주소 : http://sexymun.cafe24.com/m_mall_detail.php?ps_mobile=on&ps_ctid=&ps_goid=22&ps_page=

 

상품정보 탭에 들어 있는 이미지들의 사이즈가 변경이 되지 않는군요. 

 

 

답변에 대한 댓글 1개

item_explan이라는 게 어디에 있는지요?
$("img[name='mainImage']").css({width:"100%", height:"auto"});
이렇게 바꿔 보세요.

그누보드가 아니라면,

 

<script type="text/javascript">

var imgs = document.getElementById('item_explan').getElementsByTagName('img');

for (var i=0, cnt = imgs.length; i<cnt; i++) {

imgs[i].style.height = 'auto';

imgs[i].style.width = '100%';

}

</script>

답변에 대한 댓글 1개

javascript 방법에 대해서도 채택은 못해드렸지만,
정말 유용한 팁입니다.
감사합니다.

답변을 작성하려면 로그인이 필요합니다.