js中获取元素属性与设置元素属性的一些概括

获取元素属性
第一个方法

  1. ComputedStyle(div).height :该属性只兼容火狐,谷歌,不兼容IE 6 7 8
    div.currentStyle.height:该属性只兼容IE,不兼容火狐和谷歌 ,二者功能一样

    1》案例1, 不给div设置高度,这个时候获取的高度是由子元素撑起的高度;
    2》案例2, div 行内设置:200px css中设置100px padding 10px boder 10px;
    获取结果 200px

    我们可以看到 ComputedStyle || currentStyle 获取的是实际计算后的高度,不包括padding border

第二个方法
getAttribute(‘height’) 只可以获取行间样式的写入值不包括padding border,写的是多少就是多少,和页面渲染出来的值没有关系 没有获取的返回值为null 如果有行内style属性,返回的是style里面设置的属性的一个字符串;

第三个方法
obj.style.attr || obj.id 类似这种形式的 也只能获取行间里面的值,写的是多少就是多少,和页面渲染出来的值没有关系,要获取的属性在行内不存在时,返回的值是一个空的字符串; 和getAttribute不同的是 obj.style.attr 可以获取到style里面的属性,getAttribute不能;

第四个方法 offset 只可以获取以下几个属性

offsetParent: 获取一个距离自己最近的有定位的相对父元素: position=fixed的子元素的offsetParent为null;
body元素的offsetParent为null。

offsetLeft: 元素左外边框到相对父元素左外边框的距离
offsetTop: 元素上外边框到相对父元素上外边框的距离
offsetHeight: 自身包括padding、边框、内容区的高度。
offsetwidth: 自身包括padding、边框、内容区的高度。

第五个方法
oDiv. clientWidth 可视宽width+padding
oDiv. clientHidth 可视高 hidth+padding
第六个方法 获取屏幕宽度
document.documentElement.clientWidth
设置元素属性
obj.style.attr=‘newstr’
这个属性如果存在,还会更改为新属性;
如果不存在,会先创建一个新属性,再给他添加新属性,最后都放在行内;
obj. setAttribute(‘attr’,‘newstr’)
可以通过obj.setAttribute(‘style’,‘height:200px’)这种方式设置

获取滚动条 scrollTop
浏览器页面滚动条高度,获取的是整个文档被卷起来的高度;
document.body.scrollTop 谷歌写法 注意这里获取的不是body被卷起的高度,这里body代表整个文档; body加margin-top ,scrollTop值不会改变
document.documentElement.scroollTop IE 写法 这里 document.documentElement 代表整个文档;

扫描二维码关注公众号,回复: 5336934 查看本文章

猜你喜欢

转载自blog.csdn.net/weixin_44607342/article/details/87965773
今日推荐