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);//130
console.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 );//盒子 左側 間隔 可視區 左側 的間隔 301
console.log( box.getBoundingClientRect().right);//盒子 右側 間隔 可視區 左側 的間隔 481
console.log( box.getBoundingClientRect().top);//盒子 頂部 間隔 可視區 頂部 的間隔 ,這個頁面的轉動會發生變化 501
console.log( box.getBoundingClientRect().bottom);//盒子 底部 間隔 可視區 頂部 的間隔,這個頁面的轉動會發生變化 731
console.log( box.getBoundingClientRect().width);//盒子 可視 寬度（就是不包括margin） 180
console.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);//undefined
console.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>