目录
操作内联样式
使用style属性来操作元素的内联样式
读取内联样式
语法：
元素.style.样式名
示例：
div.style.width;
div.style.height注意细节：
如果样式名中带有-，则需要将样式名修改为驼峰命名法将-去掉，然后后的字母改大写！
比如：
background-color在js操作里面应写为backgroundColor
修改内联样式
语法：
元素.style.样式名 = 样式值;
注意细节：
- 样式值，如宽度高度等，需要使用双引号括起来。
- 通过style修改和读取的样式都是内联样式，由于内联样式的优先级比较高，所以通过JS来修改的样式，往往会立即生效，但是如果样式中设置了!important，则内联样式将不会生效。
读取元素的当前样式
正常浏览器
使用getComputedStyle()方法。这个方法是window对象的方法，可以返回一个对象，此对象中保存着当前元素生效样式。
getComputedStyle(参数1,参数2)参数
| 参数 | 描述 |
|---|---|
| 参数1 | 要获取样式的元素 |
| 参数2 | 可以传递一个伪元素，一般传递null即可 |
示例：
// 获取元素的宽度
getComputedStyle(box , null)[“width”];
注意细节：
- 通过该方法读取到的样式都是只读模式，不能进行修改。
- 如果获取的样式没有设置，这会获取到样式的真实的值，而不是默认值。比如：没有设置width，他不会获取到auto，而是获取到了一个长度。
IE8浏览器
使用currentStyle进行读取当前样式
语法：
元素.currentStyle.样式名
示例：
获取box的宽度
box.currentStyle[“width”]
注意细节：
- 通过这个属性读取到的样式是只读模式，不能进行修改。
- 如果当前元素没有设置改样式，这获取到它的默认值。
读取样式实现所有浏览器的兼容
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj , name){
//对象.属性不存在，不会报错，如果直接寻找对象，（当前作用域到全局作用域）找不到会报错
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}注意细节：
- if判断里面，直接写getComputedStyle，如果没有找到对应的对象，这会去全局里面去找，若没找到则会直接报错。
其它实用样式相关的属性
注意细节：以下样式都是只读模式,未指明偏移量都是相对于当前窗口左上角
| 属性名 | 描述 |
|---|---|
| clientHeight | 元素的可见高度，包括元素的内容区和内边距的高度 |
| clientWidth | 元素的可见宽度，包括元素的内容区和内边距的宽度 |
| offsetHeight | 整个元素的高度，包括内容区、内边距 |
| offfsetWidth | 整个元素的宽度，包括内容区、内边距 |
| offsetParent | 当前元素的定位父元素，离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位（position不是static（static为默认的定位）），则返回body。 |
| offsetLeft | 当前元素和定位父元素之间的水平偏移量（从左计算） |
| offsetTop | 当前元素和定位父元素之间的垂直偏移量（从上计算） |
| scrollHeight | 获取元素滚动区域的高度 |
| scrollWidth | 获取元素滚动区域的宽度 |
| scrollLeft | 获取元素水平滚动条滚动的距离 |
| scrollTop | 获取元素垂直滚动条滚动的距离 |
判断滚动条是否滚动到底
垂直滚动条滚动到底的条件：
scrollHeight -scrollTop = clientHeight
水平滚动条滚动到底的条件：
scrollWidth -scrollLeft = clientWidth
代码示例：（阅读协议的☑️打钩同意）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册协议阅读</title>
<style type="text/css">
#info{
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 当垂直滚动条滚动到底时使表单项可用
* onscroll
* - 该事件会在元素的滚动条滚动时触发
*/
//获取id为info的p元素
var info = document.getElementById("info");
//获取两个表单项
var inputs = document.getElementsByTagName("input");
//为info绑定一个滚动条滚动的事件
info.onscroll = function(){
//检查垂直滚动条是否滚动到底
if(info.scrollHeight - info.scrollTop == info.clientHeight){
//滚动条滚动到底，使表单项可用
/*
* disabled属性可以设置一个元素是否禁用，
* 如果设置为true，则元素禁用
* 如果设置为false，则元素可用
*/
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
};
</script>
</head>
<body>
<h3>欢迎亲爱的用户注册</h3>
<p id="info">
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
</p>
<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
<input type="submit" value="注册" disabled="disabled" />
</body>
</html>