JS基础知识总结（四）

1、使用DOM操作CSS

（1）通过js修改元素样式     

 语法： 元素.style.样式名=样式值

 注：如果css的样式名中含有 -

        这种名称在js中是不合法的比如background-color

        需要将这种样式名修改为驼峰命名法

        将 - 去掉 -后的字母大写

        我们通过style属性设置的样式都是内联样式

        而内联样式有较高的优先级，所以通过js修改的样式会立即显示

         但是如果在style标签中的样式中写了！important则该样式会具有最高的优先级

         即使通过js也不能覆盖该样式，此时会导致js修改样式失败

          所以尽量不要添加！important

（2）读取元素的样式           

语法：元素.style.样式名

           通过style设置和读取的都是内联样式

           无法读取样式表中的样式

（3）获取元素当前显示样式

获取元素当前显示的样式

语法： 元素.currentStyle.样式名

可以用来读取当前元素显示的样式

如果当前元素没有设置样式则会获取他的默认值

注意：只有ie浏览器支持其他的都不支持

在其他浏览器中使用

getComputedStyle()这个方法来获取元素当前样式

这个方法是window的方法可以直接使用

需要两个参数

                第一个 需要获取样式的元素

                第二个 可以传递一个伪元素，一般传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

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

如果获取的样式没有设置，则会获取到真实的值，而不是默认值

比如没有设置width，他不会获取到auto而是一个长度

但是该方法不支持ie8及其以下浏览器

兼容所有浏览器的获取方式getstyle（）

          function getStyle(obj,name){
                if(window.getComputedStyle){
                    return getComputedStyle(obj,null)[name];
                }   
                else{
                    return obj.currentStyle[name];
                }
             }

2、其他样式的相关属性 

1、获取元素的宽高

（1）clientWidth     clientHeight

clientWidth

clientHeight

这两个属性可以获取元素的可见高度和宽度

这些属性不带px返回的是数字,可以直接进行计算

会获取元素的宽度和高度，包括内容区和内边框

这些属性都是只读的，不能改

（2） offsetWidth       offsetHeight

offsetWidth

offsetHeight

获取元素整个的元素宽度高度

包括内容区，内边距，外边距

2、获取当前元素定位的父元素

offsetParent

可以获取当前元素定位父元素

它会获取到离当前元素最近开启了定位的祖先元素

如果所有的祖先元素都没有开启则返回body

offsetLeft

当前元素相当于其定位父元素的水平偏移量

offsetTop

当前元素相当于其定位父元素的垂直偏移量

3、获取元素滚动区域的宽高

scrollHeight

scrollWidth

可以获取元素整个滚动区域的高度，宽度

scrollLeft

可以获取水平滚动条滚动的宽度

scrollTop

可以获取垂直滚动条滚动的高度

判断滚动条是否到最底

当满足 scrollWidth-scrollLeft==clientWidth

说明垂直滚动条到底

当满足 scrollHeight-box4.scrollTop==clientHeight

说明垂直滚动条到底

练习：

 <script>
       window.onload=function(){
            /*
        * 检查是否滚动到底
        * onscroll
        * 该事件会在滚动条滚动时触发
        */
        // 获取info
        var info=document.getElementById("info");
        var inputs=document.getElementsByTagName("input");
        info.onscroll=function(){
            if(info.scrollHeight-info.scrollTop==info.clientHeight)
            {
                inputs[0].disabled=false;
                inputs[1].disabled=false;
            }
        };
       };
 
 
    </script>