getBoundingClientRect
获取到元素盒模型的一些信息,得到的结果是没有单位的,不包含滚动条的距离
width 宽度(包含边框)
height 高度(包含边框)
left 从元素最左边到可视区最左边距离
right 从元素最右边到可视区最左边距离
top 从元素的最上边到可视区最上边的距离
bottom 从元素的最下边到可视区最上边的距离
···
getAttribute
用来获取元素的属性
元素.getAttribute(属性名)
如果参数是一个src或者href的话,打印结果是引号里面的值(相对地址)
取不到js的自定义属性
可以取到html的自定义属性
<script>
window.onload = function () {
var box = document.getElementById("box");
var pic = document.getElementById("pic");
console.log(box.id);//box
console.log(pic['src']);//file:///D:/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E7%AC%94%E8%AE%B0/img/1.jpg
console.log(box.getAttribute('class'));//color
console.log(pic.getAttribute('src'));//../网页制作笔记/img/1.jpg
box.index = 1;
console.log(box.index);//1
console.log(box.getAttribute('index'));//null
console.log(box);//<div id="box" class="color" n="121"><img src="../网页制作笔记/img/1.jpg" alt="" id="pic"></div>
console.log(box.n);//undefined
console.log(box['n']);//undefined
console.log(box.getAttribute('n'));//121
console.log(box['data-v']);//undefined
console.log(box.dataset.v);//xaiogou
}
</script>
<div id="box" class="color" n="121" data-v="xaiogou">
<img src="../网页制作笔记/img/1.jpg" alt="" id="pic">
</div>
setAttribute
设置属性
元素.setAttribute(attr,value);
两个元素必须同时出现
removeAttribute
删除属性
元素.removeAttrrbute(属性名)