DOM操作CSS样式
1. 操作样式
-
可以通过JS修改元素的内联样式
语法:
元素.style.样式名 = 样式值
注意:
- 如果样式名中含有
-
,由于这种名称在JS中不合法,需要修改成驼峰命名法。比如background-color → backgroundColor
- 此方法修改的是内联样式,具有较高的优先级,但如果原样式中有
!important
则会导致修改样式失效 - 通过style属性设置和读取的都是内联样式,无法读取样式表中的样式
//修改box1的背景颜色为黄色 box1.style.backgroundColor = "yellow"; //读取box1中的内联样式,如果没有内联样式则返回null alert(box1.style.width);
- 如果样式名中含有
2. 获取当前样式
-
getComputedStyle()
这个方法可以获取元素当前的样式,该方法会返回一个对象,对象中封装了当前元素对应的样式。如果获取的样式没有被设置过,则会获取到其真实值,而非默认值。该方法是只读的语法:
getComputedStyle([要获取样式的元素],[可以传递一个伪元素,一般为null])
alert(getComputedStyle(box1,null).width);
3. 其它样式相关属性
-
clientWidth & clientHeight
获取元素的可见宽度和高度,括内容区和内边距
这些属性都返回一个不带单位的数字且为只读形式,不能修改
-
offsetWidth & offsetHeight
获取整个元素的宽度和高度,包括内容区,内边距和边框
-
offsetParent
可以用来获取当前元素的定位父元素
会寻找离当前元素最近的,开启了定位的祖先元素。如果所有的祖先元素都没有开启定位,则返回body
-
offsetLeft & offsetTop
获取当前元素相对于其定位父元素的水平和垂直偏移量
-
scrollWidth & scrollHeight
可以获取元素整个滚动区域的宽度和高度
-
scrollLeft & scrollTop
可以获取垂直滚动条滚动的距离
-
当满足
scrollHeight - scollTop == clientHeight
说明垂直滚动条到底了当满足
scrollWidth - scrollLeft == clientWidth
说明水平滚动条到底了
原文地址:http://www.cnblogs.com/Solitary-Rhyme/p/16849743.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性