根据拿到元素访问其他节点
元素访问子节点 - children
元素访问父节点 - parentNode
元素访问兄弟节点 - previousSibling / nextSibling
JS中拿到元素的的一些操作
1、修改元素样式
var closeBtn = document.getElementById("closeBtn");
可以直接对closeBtn对元素样式进行操作
closeBtn.parentNode.style.display = "none"; //关闭父节点的显示
区别：
closeBtn.parentNode.style.visibility = "hidden"; //隐藏父节点，但是位置还占着
2、读取元素样式
读样式方法，通过document.defaultView.getComputedStyle()来读取样式。
var ad = document.getElementById("ad");
var currentStyle = document.defaultView.getComputedStyle(ad);
consle.log(currentStyle.width)
consle.log(currentStyle.height)
流氓广告-- 无法关闭，点击后广告变大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#ad{
background-color:blueviolet;
float: right;
right: 0;
position: fixed;
width: 200px;
height: 200px;
}
#ad button{
float: right;
}
</style>
<body>
<div id="ad">
这里是广告
<button id="closeBtn">关闭</button>
</div>
<script type="text/javascript">
var closeBtn = document.getElementById("closeBtn");
closeBtn.addEventListener("click",function(){
// 拿到元素的style属性只能进行修改,不能读取
// closeBtn.parentNode.style.display = "none"; //点击关闭按钮关闭广告
// closeBtn.parentNode.style.visibility = "hidden"; //隐藏div，但是位置还占着
// 读样式方法，通过得到的currentStyle来读取样式。
var ad = document.getElementById("ad");
var currentStyle = document.defaultView.getComputedStyle(ad);
// 点击广告变大
ad.style.width = (parseInt(currentStyle.width) + 20) + "px";
ad.style.height = (parseInt(currentStyle.height) + 20) + "px";
});
</script>
</body>
</html>
3、删除
必须父元素操作，才能删除子元素
ul.removeChild(li); //删除子标签li
4、添加
必须是父元素才能对子元素进行添加操作
var div = document.createElement("div"); // 创建元素,然后对创建的元素进行操作
divFather.appendChild(div); //添加子标签(加在最后)
divFather.insertBefore(div,位置); //添加子标签（指定位置）
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
width: 800px;
height: 400px;
margin: 10px auto;
border:black solid;
overflow: hidden;
}
#button1{
width: 50px;
height: 30px;
font-size: 18px;
margin-left: 300px;
}
#button2{
width: 50px;
height: 30px;
font-size: 18px;
margin-left:500px;
}
#main div{
width: 80px;
height:80px;
float:left;
}
</style>
</head>
<body>
<div>
<div id="main"></div>
<button id="button1">添加</button>
<button id="button2">闪烁</button>
</div>
<script type="text/javascript">
var main = document.getElementById("main");
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var flag = true;
var glint1 = 0;
button1.addEventListener("click",function(){
var div1 = document.createElement("div");
div1.style.backgroundColor = randomColor();
main.insertBefore(div1,main.firstChild);
})
button2.addEventListener("click",function(){
if (flag){
glint1 = setInterval(glint,200);
}else{
clearInterval(glint1);
}
button2.innerHTML = flag?"暂停":"闪烁";
flag = !flag;
});
function glint(){
var divAll = document.querySelectorAll("#main div");
for (var i = 0; i<divAll.length; i+=1){
divAll[i].style.backgroundColor = randomColor();
};
}
function randomColor(){
var red = parseInt(Math.random()*256);
var green = parseInt(Math.random()*256);
var blue = parseInt(Math.random()*256);
return "rgb(" + red + ", " + green + ", " + blue + ")";
}
</script>
</body>
</html>
效果：
网友评论