DOM第三章 操作CSS

第三章 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的方法,可以直接用.

需要两个参数:

1. 要获取的样式
2. 可以传递一个伪元素,一般都传null

返回值为一个对象,该对象中封装了当前元素对应的样式

可以通过 对象.样式名 来读取样式

如果获取的对象没有设置,则会获取到一个真实的值,而非默认值

但是这个方法不适合ie8以下

这两种方获取到的样式都是只读的,不能修改.

如果要修改,必须通过style属性

第三讲.getStyle( )方法

前面提到的方法,一个支持ie9和其他,一个支持ie8及以下,怎么合并一下?

自己写一个函数,用来获取指定元素的当前的样式

参数:

1. obj 要获取样式的元素
2. 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由于找不到变量而报错

第四讲.其他样式的相关属性

1. clientWidth属性 获取可见元素的宽度

2. clientHeight属性 获取元素的可见高度

   var width=box1.clientWidth;
   

这两个属性返回的都是数字,可以直接进行运算

这两个属性获取的是可见的宽度高度,是内容区和内边距的总和(不包括边框)

这两个属性都是只读的,不能修改

1. offsetWidth属性 获取元素的整个宽度
2. offsetHeight属性 获取元素的整个高度

是内容区+内边距+边框的总和

1. offsetParent属性 获取元素的最近的开启定位的祖先元素

2. offsetLeft属性 当前元素相对于其定位元素的水平偏移量

3. offsetTop属性 当前元素相对于其定位元素的垂直偏移量

4. scrollHeight属性 滚动高度

5. scrollWidth属性 滚动宽度

如果它有滚动条,滚动之后有多高多宽

3. scrollLeft属性 水平滚动条滚动的距离
4. 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;
    }
}