2013-10-22 37 views
0

難以更改div中的元素,事件不知道是否應該使用for循環來通過div並進行更改,或者將事件放入div中並單獨調用它們。Javascript - 在div內的元素上使用事件和函數

也很好奇,我可以用「這個」

<html><head> 
<script type='text/javascript'> 


function changeBorder(){  //change all pics to red border 
document.images.style.border="2px solid red"; 
} 

function changeSize(){  //change pics in div1 to 100 onmouseover 
pics = document.getElementById('div1'); 
for(i = 0; i < pics.length; i++) 
{ 
    pics[i].onmouseover.width = 100; 
    pics[i].onmouseover.height = 100; 
    } 
} 


function turnBlue(){   //paragraphs turn blue on doubleclick  
alert("double click turn blue"); 
    var paraBlue = document.getElementById.indexOf('p'); 
paraBlue.style.background="blue"; 
} 

function yellowBack(){   //background on <p> to yellow onmouseover 
var paraYell = document.getElementById.indexOf('p'); 
paraYell.style.background="yellow"; 
} 




} 



    </script></head> 
<body> 

<div id="div1" onmouseover="changeSize()"> 
<img src="cat.jpg" id='im1' name='im1'/> 
<img src="dog.jpg" id='im2' name='im2'/> 
<img src="fish.jpg" id='im3' name='im3'/> 

</div> 

<div id="div2" ondblclick="turnBlue()"> 
<p id="p1">This is a paragraph</p> 
<p id="p2">This is a paragraph</p> 
<p id="p2">This is a paragraph</p> 
</div> 

<div id="div3" onmouseover="yellowBack()"> 
<p id="p4">This is a paragraph</p> 
<p id="p5">This is a paragraph</p> 
<img src="bird.jpg" id='im4' name='im4'/> 
<img src="turtle.jpg" id='im5' name='im5'/> 
</div> 



</body> 
</html> 
+2

你不介意創建例如在在[jsBin(http://jsbin.com)? – nietonfir

+0

是否有你不想通過CSS類調用樣式更改的原因? – Todd

回答

0

太多的問題需要解決。

只是一個提示

function changeSize(){ 
    var pics = document.querySelectorAll("#div1 img"); 
    for(var i = 0; i < pics.length; i++){ 
     pics[i].style.width = "100px"; 
     pics[i].style.height = "100px"; 
    } 
} 
相關問題