第三章 DOM操作CSS
第一讲.操作内联样式
前面讲的dom,都是操作html,功能会比较单一
接下来说的是操作css
修改元素的样式
语法:元素.style.样式名=‘样式值’
box1.style.width='100px';
在css中,有很多的减号
background-color
但是减号在js中是减法的意思,需要将这种样式名改为驼峰命名法:
backgroundColor;
但是这里修改的都是内联样式,而内联样式会有较高的优先级,所以通过js修改的样式往往会立即显示
但是如果在样式中写了!important,则此时样式会有最高的优先级
即使通过JS也不能修改该样式,所以尽量不要写!important
读取元素的样式
语法:元素.style.样式名
var width=box1.style.width;
但是这里获取的是px的值,相当于字符串,不能直接进行运算
通过style属性设置读取的都是内联样式,如果没有内联样式,它就读不到了
无法读取样式表中的样式.
第二讲.读取当前的样式
语法: 元素.currentStyle.样式名
用于读取元素当前正在显示的样式
我靠,这个只有ie能用…
在其他浏览器中,可以使用getComputedStyle( )方法获取当前样式
这个是window的方法,可以直接用.
需要两个参数:
- 要获取的样式
- 可以传递一个伪元素,一般都传null
返回值为一个对象,该对象中封装了当前元素对应的样式
可以通过 对象.样式名 来读取样式
如果获取的对象没有设置,则会获取到一个真实的值,而非默认值
但是这个方法不适合ie8以下
这两种方获取到的样式都是只读的,不能修改.
如果要修改,必须通过style属性
第三讲.getStyle( )方法
前面提到的方法,一个支持ie9和其他,一个支持ie8及以下,怎么合并一下?
自己写一个函数,用来获取指定元素的当前的样式
参数:
- obj 要获取样式的元素
- name 要获取的样式名
function getStyle(obj,name){
//正常浏览器的方式
//return getComputedStyle(obj,null)[name];
//ie8的方式
//return obj.currentStyle[name];
}
[name]是利用隐式转换,将name转换成它的参数值
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
使用window.getComputedStyle而不是直接写getComputedStyle,目的是为了防止ie8由于找不到变量而报错
第四讲.其他样式的相关属性
-
clientWidth属性 获取可见元素的宽度
-
clientHeight属性 获取元素的可见高度
var width=box1.clientWidth;
这两个属性返回的都是数字,可以直接进行运算
这两个属性获取的是可见的宽度高度,是内容区和内边距的总和(不包括边框)
这两个属性都是只读的,不能修改
- offsetWidth属性 获取元素的整个宽度
- offsetHeight属性 获取元素的整个高度
是内容区+内边距+边框的总和
-
offsetParent属性 获取元素的最近的开启定位的祖先元素
-
offsetLeft属性 当前元素相对于其定位元素的水平偏移量
-
offsetTop属性 当前元素相对于其定位元素的垂直偏移量
-
scrollHeight属性 滚动高度
-
scrollWidth属性 滚动宽度
如果它有滚动条,滚动之后有多高多宽
- scrollLeft属性 水平滚动条滚动的距离
- scrollTop属性 垂直滚动条滚动的距离
当满足scrollHeight - scrollTop == clientHeight时,说明垂直滚动条到了底部
当满足scrollWidth - scrollLeft == clientWidth时,说明水平滚动条到了底部
可以利用这个功能,判断滚动条有没有滚动到底部,常用于网站注册时的阅读协议
滚动条滚动事件 onscroll
info.onscroll=function(){
if(info.scrollHeight-info.scrollTop==info.clientHeight){//滚动条滚动到底
inputs[0].disabled=false;//s
inputs[1].diaabled=false;
}
}