2012-12-24 31 views
2

我想改变'img'类中的'im'和'desc'类的属性。我将当前元素传递给javascript函数mOver()和mDown() 。当我鼠标悬停图像的边界以及文本它应该下面change.Here是我的代码:改变一个类的元素的属性

<html> 
<head> 
<style> 
.img 
    { 
    margin:2px; 
    border:1px solid #0000ff; 
    height:90; 
    width:110; 
    float:left; 
    text-align:center; 
    } 
.im 
    { 
    width:110px; 
    height:90px; 
    display:inline; 
    margin:3px; 
    border:1px solid #ffffff; 
    } 
.desc 
    { 
    text-align:center; 
    font-weight:normal; 
    width:120px; 
    margin:2px; 
    } 
</style> 
<script> 
function mOver(a) 
    { 
    a.style.border="10px solid #0000ff"; 
    a.getElementByClassName("desc").innerHTML="Click on the image"; 
    } 
function mDown(a) 
    { 
    a.style.border="1px solid #ffffff"; 
    a.getElementByClassName("desc").innerHTML="You have clicked already"; 
    } 
</script> 
</head> 
<body> 
<div class="img" onmouseover="mOver(this)" onmouseout="mDown(this)"> 
    <a target="_blank" href="abc.png"> 
    <img class="im" src="abc.png"></a> 
    <div class="desc">ABC</div> 
</div> 
<div class="img" onmouseover="mOver(this)" onmouseout="mDown(this)"> 
    <a target="_ blank" href="def.png"> 
    <img class="im" src="def.png"></a> 
    <div class="desc">DEF</div> 
</div> 
</body> 
</html> 

图片下方的文字并没有改变,因为它应该有。 我觉得是有毛病线

a.getElementByClassName("desc").innerHTML="You have clicked already"; 

我是比较新的JavaScript所以请让我知道什么是错here.Anyways由于事先

+0

它不应该是'getElementsByClassName'(复数)? – m90

回答

2

它应该是getElementsByClassName以“S” 。你也应该标记你想改变的元素的索引。如果你想改变的第一要素,做到这一点:

a.getElementsByClassName("desc")[0].innerHTML = "You have clicked already"; 

因为数组是0指数的,这改变了由该方法返回的数组中的第一个元素。

但是,如果你打算改变这一切与类名的元素,那么你必须循环:

var elements = a.getElementsByClassName("desc"); 

for (var i = elements.length; i--;) { 
    elements[i].innerHTML = "You have clicked already"; 
} 
+0

感谢您的帮助 – Tyranicangel

1

您要使用的方法被称为getElementsByClassName(预计多个元素,而不是被发现到getElementById)并返回一个节点列表。因此,你行应为:

a.getElementsByClassName("desc")[0].innerHTML="You have clicked already"; 

对于文档阅读MDN on NodeLists

+0

感谢您的文档 – Tyranicangel

相关问题