JS基础入门篇（二十四）—DOM（下）

1.offsetLeft/offsetTop

offsetLeft/offsetTop : 到定位父级节点的距离.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{padding: 20px;}#wrap{width: 100%;height: 50px;border: 1px solid black;position: absolute;}#inner{background: yellow;}#content{width: 200px;height: 100px;margin-left: 30px;background: red;position: absolute;left: 100px;border:10px solid black;}</style>
</head>
<body><div id="wrap"><div id="inner"><div id="content"></div></div></div><script>var content=document.getElementById("content");console.log(content.offsetLeft);//130console.log(content.offsetTop);//40</script>
</body>
</html>

2.node.getBoundingClientRect

    返回值是一个对象，包含了元素盒模型的详细信息(可视大小)；取对象中详细的属性值(相对于浏览器可视区域)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>body{margin: 0;}#wrap{position: relative;width:400px;height:400px;border: 1px solid #000;left: 100px;top: 200px;}#box{width:100px;height:150px;background-color:red;position: absolute;left: 100px;top: 200px;margin: 100px;padding: 10px;border: 30px solid #000;}
</style>
</head>
<body>
<div id="wrap"><div id="box"></div>
</div>
<!--node.getBoundingClientRect()返回值是一个对象，包含了元素盒模型的详细信息(可视大小)；取对象中详细的属性值(相对于浏览器可视区域)
-->
<script>var box = document.getElementById("box");console.log( box.getBoundingClientRect() );console.log( box.getBoundingClientRect().left );//盒子 左边 距离 可视区 左边 的距离  301console.log( box.getBoundingClientRect().right);//盒子 右边 距离 可视区 左边 的距离  481console.log( box.getBoundingClientRect().top);//盒子 顶部 距离 可视区 顶部 的距离 ,这个页面的滚动会发生变化   501console.log( box.getBoundingClientRect().bottom);//盒子 底部 距离 可视区 顶部 的距离,这个页面的滚动会发生变化   731console.log( box.getBoundingClientRect().width);//盒子 可视 宽度（就是不包括margin） 180console.log( box.getBoundingClientRect().height);//盒子 可视 高度（就是不包括margin）230
</script>
</body>
</html>

3.getAtrribute：获取元素属性

<body><div id="box" class="div1" age=10></div><script>var box=document.getElementById("box");
//-------------行间 自定义 属性 用getAttribute可以取到------------console.log(box.getAttribute("age"));//"10"
//-------------行间 自定义 属性 用.和[] 取不到---------------------console.log(box.age);//undefinedconsole.log(box["age"]);//undefined//------------------------------------------------------------box.gender="woman";
//-------------js中 自定义 属性 用.和[]可以取到------------console.log(box.gender);//"woman"console.log(box["gender"]);//"woman"
//-------------js中 自定义 属性 用getAttribute 取不到---------------------console.log(box.getAttribute("gender"));//null</script>
</body>

3.setAttribute和removeAttribute

setAttribute:设置的自定义属性在行间。
removeAttribute：删除行间所在的自定义属性。

<body><img id="img" _src="./2.jpg" src="1.jpg"/><script>var img = document.getElementById("img");document.onclick = function(){img.setAttribute( "src", img.getAttribute("_src") );//点击页面后，将图片1换成图片2};img.setAttribute( "s", img.getAttribute("_src") );//在行间设置自定义属性 s="./2.jpg".console.log(img.getAttribute("s"));setTimeout(function(){img.removeAttribute( "s" );//页面打开1s后，删除行间设置的自定义属性。},1000)</script>
</body>

4.移入移出效果

移入当前数字，数字的前后背景变色。点击查看效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>
</ul>
<body><script>var ul=document.getElementsByTagName("ul")[0];var li=ul.getElementsByTagName("li");var now=li[0];for(var i=0;i<li.length;i++){li[i].onmouseover=function () {//清除上一次的颜色now.style.background="";now.previousElementSibling && (now.previousElementSibling.style.background="");now.nextElementSibling && (now.nextElementSibling.style.background="");//给此次移上去的li添加颜色this.style.background="red";this.previousElementSibling && (this.previousElementSibling.style.background="pink");this.nextElementSibling && (this.nextElementSibling.style.background="pink");//将此次对应的li赋值给now。now就知道此次指的是哪个li。now=this;}}</script>
</body>
</html>