通过JS的DOM操作网页的样式
一.JS操作元素内联样式
- 语法: 元素.style.样式名 = 样式值;
- 注意: 若CSS样式名中含有-, 例: background-color(即背景)
- 这种名称在JS中不允许, 需要将其改为驼峰命名, 例: backgroundColor
- 即, 去掉样式名中的-, 并将-后的字母改为大写.
- 忘记的话, 可以查看W3School手册中的CSS样式
注意: 通过JSDOM操作元素的style属性读取或修改的样式都是内联样式, 不能读或改CSS的样式, 内联样式拥有较高的优先级, 所以通过JS修改的样式会立即执行.
但是, 若在样式中写了 !important ,则此时样式会有最高的优先级, 无法用JS覆盖该样式. 所以尽量不要用 !important 声明样式.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <html> <head> <meta charset="UTF-8"> <title>index</title> <script type="text/javascript"> window.onload = function(){ var box = document.getElementsByClassName("box")[0]; var btn = document.getElementById("btn01"); btn.onclick = function(){ box.style.width = "300px"; box.style.height = "300px"; box.style.backgroundColor = "yellow"; }; }; </script> <style type="text/css"> .box{ width: 100px; height: 100px; /* *若在red后加!important, *JS不能通过style修改背景颜色 */ background-color: red !important; } </style> </head> <body> <button id="btn01">修改样式</button> <div class="box"> </div> </body> </html>
|
二.读取元素的生效样式
- 语法: 元素.currentStyle.样式名;
- currentStyle只有IE和Opera支持, 通过currentStyle读取元素样式, 若改样式没有值, 则返回其默认值, 如: currentStyle.width 为auto
- 别的浏览器(IE9+)可以用window的getComputeStyle方法
- 该方法返回一个对象, 该对象封装了指定元素对应的样式
- 参数: ①要获取样式的元素②可以传递一个伪元素, 一般传null
- 通过该对象读取的样式没有值, 也会返回默认值, 但有点不一样, 它返回的为具体的值.
注意: 通过currentStyle和getComputeStyle()方式只能读取元素的样式, 不能修改.要想修改样式, 必须使用style属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <html> <head> <meta charset="UTF-8"> <title>index</title> <script type="text/javascript"> window.onload = function() { var box = document.getElementsByClassName("box")[0]; var btn = document.getElementById("btn01"); btn.onclick = function() { var css = window.getComputedStyle(box, null); var w = css.width; var h = css.height; var bgc = css.backgroundColor; alert("宽:" + w + ";高:" + h + ";背景色:" + bgc); w = box.currentStyle.with; bgc = box.currentStyle.backgroundColor; }; }; </script> <style type="text/css"> .box{ height: 100px; } </style> </head> <body> <button id="btn01">显示样式值</button> <div class="box"> </div> </body> </html>
|
三.getStyle()
- 二中提到的获取元素样式的方式, currentStyle只支持IE, 而getComputedStyle()方式不支持IE8及一下.
- 我们可以自己定义一个函数getStyle(), 用来获取指定元素的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <head> <style type="text/css"> .box { height: 100px; background-color: rgb(255, 0, 0); } </style> </head> <body> <button id="btn01">显示样式值</button> <div class="box"> </div> <script type="text/javascript"> function getStyle(obj, name) { if(window.getComputedStyle) { return getComputedStyle(obj, null)[name]; } else { return obj.currentStyle[name]; } } var box = document.getElementsByClassName("box")[0]; var btn = document.getElementById("btn01"); btn.onclick = function() { var w = getStyle(box,"width"); var h = getStyle(box,"height"); var bgc = getStyle(box,"backgroundColor"); alert("宽:" + w + ";高:" + h + ";背景色:" + bgc); }; </script> </body>
|
四.其他样式相关属性
属性 |
描述 |
element.clientHeight |
返回元素的可见高度 |
element.clientWidth |
返回元素的可见宽度 |
element.offsetHeight |
返回元素的高度 |
element.offsetWidth |
返回元素的宽度 |
element.offsetParent |
返回元素的偏移容器 |
element.offsetLeft |
返回元素的水平偏移位置 |
element.offsetTop |
返回元素的垂直偏移位置 |
element.scrollHeight |
返回元素的整体高度 |
element.scrollWidth |
返回元素的整体宽度 |
element.scrollLeft |
返回元素左边缘与视图之间的距离 |
element.scrollTop |
返回元素上边缘与视图之间的距离 |
clientHeight、clientWidth: 获取元素可见宽度、高度值(返回数字, 不包括px), 不能修改
可见高度和宽度指内容区和内边距(width/height+padding)
offsetHeight、offsetWidth: 获取元素整个的宽度、高度(可见+boder)
offsetParent: 获取当前元素的定位父元素, 即距当前元素最近的开启了定位的祖先元素, 若所有的祖先元素都没开启定位, 则返回body.
offsetLeft、offsetTop: 获取当前元素相对于定位父元素的偏移量
scrollHeight、scrollWidth: 获取元素整个滚动区域的高度、宽度
scrollLeft、scrollTop: 获取滚动条滚动的距离, 注意: chrome认为浏览器的滚动条是body的, 火狐等浏览器认为浏览器的滚动条是html的.
当scrollHeight - scrollTop == clientHeight时, 说明垂直滚动条已经滚动到底
当scrollWidth - scrollLeft == clientWidth时, 说明水平滚动条已经滚动到底