Javascript - 在div中的元素上使用事件和函数

时间:2013-10-22 21:26:12

标签: javascript

在div中更改元素时遇到困难,因为我不应该理解是否应该使用for循环来遍历div并进行更改或将事件放入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>

1 个答案:

答案 0 :(得分: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";
    }
}