有关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>
如上,希望鼠标点击后背景色改变,如何正确的获取类名改变背景色? 展开
<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>
如上,希望鼠标点击后背景色改变,如何正确的获取类名改变背景色? 展开
1个回答
展开全部
<!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属性来获取元素
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询