1.操作内联样式

语法

元素.style.样式名 = 样式值

注意
如果CSS的样式名中含有-，这种名称在JS中是不合法的需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写

box1.style.width = "300px";

通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即展示
通过style属性设置和读取的都是内联样式,无法读取样式表中的样式
如果在样式中写了！importtant，则此时样式会有最高的优先级，即使通过JS也不能覆盖样式，此时将会导致JS修改样式失效,所以尽量不要为样式添加！important

2.读取元素的样式（不限范围）

获取元素当前显示的样式

元素.currentStyle

语法：元素.currentStyle.样式名
（只有IE支持，其他的不支持）
它可以用来读取当前元素正在显示的样式

getComputedStyle()

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

这个方法是window的方法，可以直接使用
需要两个参数：
要获取样式的元素
可传递一个伪元素，一般都传递null
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象.样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如，没有设置width，他不会获取到auto，而是一个长度

getComputedStyle(box,null).width

通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

自定义函数，让ie8和其他浏览器都兼容

参数
obj 要获取样式的元素
name 要获取的样式名
实现

function getStyle(obj,name){
     //不需要识别浏览器版本，只需要判断是否有getcomputedStyle方法
      if(window.getComputedStyle){//括号里面不能直接写getComputedStyle（为变量），应该写成window.get...（为属性）
            //正常浏览器的方式
            return getComputedStyle(obj,null)[name];
      }else{
            IE8的方式
            return obj.currentStyle[name];
      }
}

//使用三元运算符
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];

注：变量如果没找到就报错，如果属性没找到就返回undefined

3.其他样式相关的属性

HTML DOM Element 对象(https://www.w3school.com.cn/jsref/dom_obj_all.asp)

clientWidth和clientHeight
这两个属性可以获取元素的可见高度和宽度
- 这些属性都是不带px的，返回的都是数字，可以直接进行计算
- 会获取元素宽度和高度，包括内容区和内边距，包括padding不包括border
- 这些属性都是只读的
offsetWidth和offsetHeight
获取元素的整个的宽度和高度，包括内容区，内边距和边框
offsetParent
可以用来获取当前元素的定位父元素
- 会获取到离当前元素最近的开启了定位的祖先元素
- 如果所有的祖先元素都没有开启定位，则返回body

<div id="box3" style="position: relative;">
      <div id="box2" style="position: relative;">
            <div> id="box1"</div>
      </div>
</div>

offsetLeft
当前元素相对于其定位元素的水平偏移量
offsetTop
当前元素相对于定位元素的垂直偏移量
scrollWidth和scrollHeight
可以获取元素整个滚动区域的高度

clientHeight获取的是父高度，而scrollWidth获取的是子的不可见的需要滚轮拖动所有部分的高度
scrollLeft和scrollTop
可以获取水平滚动条、垂直滚动条滚动的距离

当满足scrollHeight - scrollTop == clientHeight时，说明垂直滚动滚动到底了

<script type="text/javascript">
      window.onload = dunction(){
            /**
             * 当垂直滚动条滚动到底是表单项可以使用
             * onscroll
             *   - 该事件会在元素的滚动条滚动时触发
             */
            //获取id为info的p元素
            var info = document.getElementById("info");
            //为info绑定一个滚动条滚动的时间
            info.onscroll = function(){
                  //检查垂直滚动条是否滚动到底了
                  if(info.scrollHeight - info.scrollTop == info.clientHeight){
                        //滚动条滚动到底，使表单项可用
                        /*disable属性可以设置一个元素是否禁用
                          如果设置为true，则元素禁用
                          如果设置为false，则元素可用
                          inputs[0].disabled = false;
                          inputs[1].disabled = false;
                  }
            };
      }
</script>
<body>
<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
<input type="submit" value="注册" disabled="disabled" />
</body>