有关js中通过类名获取元素问题

<!DOCTYPEhtml><html><metahttp-equiv="Content-Type"content="text/html"charset="utf-8">... <!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<body>
<div class="div1" onmouseover="mOver(this)" onmouseout="mOut(this)" style="background:blue;width:120px;height:20px;padding:40px;color:#fff;">
把鼠标移动到上面
</div>
<script>
function mOver(obj){
obj.innerHTML="谢谢你";
document.getElementByClass("div1").style.background="red";
}

function mOut(obj){
obj.innerHTML="把鼠标移动到上面"
document.getElementByClass("div1").style.background="green";
}

</script>

</body>
</html>
如上,希望鼠标点击后背景色改变,如何正确的获取类名改变背景色?
展开
 我来答
yugi111
推荐于2016-04-07 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>last.html</title>
<style>
</style>
<script type="text/javascript">
var toggleColor = function (dom)
    {
    if (!!dom.index)
    {
    dom.innerHTML = '把鼠标点击';
    document.querySelector ('.div1').style.backgroundColor = 'green';
    // dom.style.background = 'green';
    // document.getElementsByClassName('div')[0].style.background = 'green';
     dom.index = 0;
    }
    else
    {
    dom.innerHTML = 'thank you';
    document.querySelector ('.div1').style.backgroundColor = 'red';
    // dom.style.background = 'red';
    // document.getElementsByClassName('div1')[0].style.background = 'red';
    dom.index = 1;
    }
    }
</script>
</head>
<body>
<div class="div1" onclick="toggleColor(this)" style="background: blue; width: 120px; height: 20px; padding: 40px; color: #fff;">把鼠标移动到上面</div>
</body>
</html>
追问
这里的  !!dom.index   还有document.querySelector ('.div1').事什么意思呢?
追答
<div class="div1" onmouseover="toggleColor(this)" onmouseout="toggleColor(this);"
style="background: blue; width: 120px; height: 20px; padding: 40px; color: #fff;">把鼠标移动到上面</div>


改成上面的就可以滑过了

!!dom.index 表示dom.index不是0或者存在



document.querySelector ('.div1')

是根据div的class属性来获取元素

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式