使用DOM操作CSS
- 通过JS修改元素的样式
语法: 元素.style.样式名=样式值
box1.style.width="300px";
注意:如果CSS样式名中含有-,这种名称在JS中是不合法的,需要这种样式名修改成驼峰命名法,去掉-,然后将-后的字母大写。
box1.style.backgroundColor="black";
通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示,但是如果在样式中写了!important,则此时样式会有最高的优先级,即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效,所以尽量不要为样式添加!important。
-
通过JS读取元素的样式
语法: 元素.style.样式名
通过style属性设置和读取到的都是内联样式,所以无法读取样式表中的样式。 -
获取元素的当前显示的样式
currentStyle() 显示当前元素正在显示的样式,如果当前元素没有设置样式,则获取它的默认语法:元素.currentStyle.样式名
注意:只有IE支持,其它的浏览器都不支持
getComputedStyle() 显示当前元素正在显示的样式,这个方法是window的方法,可以直接使用。需要两个参数,第一个参数是要获取样式的元素,第二个可以传递一个伪元素,一般不用,一般都传null。
该方法会返回一个对象,对象中封装了当前元素对应的样式,可以通过对象.样式名
来读取样式,如果获取的样式没有设置则会获取到真实的值,而不是默认值。比如:没有设置width,它不会获取auto,而是一个长度。该方法不支持IE8及以下浏览器。
var obj = getComputedStyle(box1,null);
alert(obj.width);
通过currentStyle和getComputedStyle读取到的样式都是只读的,不能修改,如果要修改必须通过style属性。
如果想要IE8和普通浏览器都支持,那么可以定义一个函数,用来获取指定元素的当前样式。
//参数:obj 要获取样式的元素 name 获取的样式名
function getStyle(obj,name) {
if(window.getComputedStyle){
//getComputedStyle前加一个window,则变成属性,如果浏览器找不到就返回undefined而不是报错
return getComputedStyle(obj,null)[name];//正常浏览器的方式,具有该方法
}else {
return obj.currentStyle[name];//IE8的方式,没有该方法
}
- 其他样式相关的属性,以下属性时不带px的,返回的都是数字,可以直接进行计算,这些属性都是只读的,不能修改
属性 | 功能 |
---|---|
clientWidth clientHeight | 这两个属性可以获取元素的可见宽度和高度,包括内容区和内边距 |
offsetWidth offsetHeight | 可以获取元素整个大小,包括内容区、内边距和边框 |
offsetParent | 可以用来获取当前元素的定位父元素,获取到离当前元素最近的开启了定位的祖先元素,只要position不是static就是开启了定位,如果所有元素都没有开启定位,则返回body。 |
offsetLeft | 当前元素相对于其定位元素的水平偏移量 |
offsetTop | 当前元素相对于其定位元素的垂直偏移量 |
scrollHeight | 获得元素整个滚动区域的高度 |
scrollWidth | 获得元素整个滚动区域的宽度 |
scrollLeft | 获取水平滚动条滚动的距离 |
scrollTop | 获取垂直滚动条滚动的距离 |
scrollHeight-scrollTop==clientHeight | 说明垂直滚动条滚到底了,应用场景:确保读取协议是否读完 |
scrollWidth-scrollLeft==clientWidth | 说明水平滚动条滚到底了 |
例:
window.onload = function () {
//当垂直滚动条滚动到底时使表单项可用,onscroll,该事件会在滚动条滚动时触发
var info = document.getElementById("info");
info.onscroll = function(){
if(info.scrollHeight-info.scrollTop==info.clientHeight){
//滚动条滚动到底使表单项可用
var inp = document.getElementsByTagName("input");
/*
* disable属性可以设置一个元素是否禁用,如果设置为true则元素禁用,如果设置为false则元素可用
*/
inp[0].disabled=false;
inp[1].disabled=false;
}
}
}
效果:
HTML和CSS代码在CSS专栏中。