JS学习记录7.2，使用DOM操作CSS，style属性，构造一个函数用来获取指定元素的当前样式并且IE8和普通浏览器都支持，以及其他样式相关的属性，是否读取完毕协议练习

本文链接：https://blog.csdn.net/qq_49080239/article/details/125710673

使用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;
                }
            }
        }