我对特定的div元素及其id有问题。我想添加悬停链接样式,但是怎么做呢?我不太明白。我的例子:
<a href="#" onmouseover="changeDiv('image_1')" onmouseout="defaultDiv('image_1')">Home</a>
脚本处理添加样式:
<script>
function changeDiv('image_1'){
document.getElementById('image_1').style.width="230px";
document.getElementById('image_1').style.height="162px";
document.getElementById('image_1').style.top="0px";
}
</script>
请告诉我为什么此代码不适用于我的身份image_1
?
答案 0 :(得分:7)
问题是你指定一个字符串文字而不是变量作为函数的参数,这将导致语法错误。
尝试将您的功能修改为以下内容:
<script>
function changeDiv(id){
document.getElementById(id).style.width="230px";
document.getElementById(id).style.height="162px";
document.getElementById(id).style.top="0px";
}
</script>
现在,您可以在调用时将任何ID传递给函数。
缓存对元素的引用以提高性能:
为了提高性能,您还可以将元素缓存在变量中,这样您就不必在DOM中查找三次:
<script>
function changeDiv(id){
var elm = document.getElementById(id);
elm.style.width="230px";
elm.style.height="162px";
elm.style.top="0px";
}
</script>
同时修改多个元素:
要同时修改多个元素,可以使用不同的参数多次调用该函数:
onmouseover="changeDiv('image_1'); changeDiv('image_2');"
或者您可以更改函数以获取具有元素ID的字符串数组。
<script>
function changeDivs(ids){
for(var i = 0, len = ids.length; i < len; i++) {
var elm = document.getElementById(ids[i]);
elm.style.width="230px";
elm.style.height="162px";
elm.style.top="0px";
}
}
</script>
然后您可以这样称呼它:
onmouseover="changeDivs(['image_1', 'image_2'])"
答案 1 :(得分:0)
必须是var not string,并且必须调用此var 例如
function myfunc(d){ //d is varble
alert(d);
}
答案 2 :(得分:0)
试试这个......
<a href="#" >
<div id='image_1' onmouseover="changeDiv('image_1')" onmouseout="defaultDiv('image_1')" style="width:100px; height:18px; border-style:ridge;">
Home
</div>
</a>
如果你只想在鼠标悬停时指针。
**添加DIV边界border-style:ridge
进行测试...
**为您的标签创建ID。
这个JS脚本
function changeDiv(IDS){
document.getElementById(IDS).style.width="230px";
document.getElementById(IDS).style.height="162px";
document.getElementById(IDS).style.top="0px";
}