JavaScript获取和修改CSS样式
（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）
1. 获取/修改内联样式
通过JS获取/修改元素的内联样式。
语法为元素.style.样式名 = "样式值"。
需要注意的是，-号在JS中不合法，所以诸如background-color的样式名，在JS中要写成驼峰式，如backgroundColor。
下面为一实例：
<style>
#box1{
height: 200px; width: 200px;
background-color: yellowgreen;
}
</style>
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1");
var box1 = document.getElementById("box1");
btn1.onclick = function(){
box1.style.height = "150px";
box1.style.width = "150px";
box1.style.backgroundColor = "blue";
}
}
</script>
<body>
<button id="btn1">点击变化</button>
<div id="box1"></div>
</body>
实现效果如下：
点击按钮之后，代码中实际改变的部分是：
<div id="box1" style="height: 150px; width: 150px; background-color: blue;"></div>
可知，该方法是直接在元素标签内通过style属性修改样式，而不是修改CSS样式。同时内联样式优先级较高，所以在修改后会立即显示。
但如果在CSS样式中设置了!important，则设置的样式优先级最高，不会受到内联样式改变的影响。
<style>
#box1{
height: 200px; width: 200px;
background-color: yellowgreen !important;
}
</style>
背景颜色设置!important，点击后不会被修改。
2. 获取当前样式
通过JS获取元素的当前样式，只读，不能修改。
语法在IE浏览器中为元素.currentStyle.样式名 = "样式值"。如果没有当前样式，则返回指定样式的默认值。
在其他浏览器中为getComputedStyle(元素名, 伪元素/null)方法，该方法会返回一个封装了指定元素样式的对象。如果没有当前样式，则返回指定元素样式的真实值。（支持IE8以上）
为了方便，一般把这两个封装成一个函数，通过判断浏览器种类使用不同方式：
function getStyle(obj, name){
if(window.getComputedStyle){ //判断
//其他浏览器，有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
}else{
//IE浏览器，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
3. 获取文档内容宽高
主要内容如下图：
（看着还是很让人眼瞎的）
详细讲解可参考：http://blog.poetries.top/2016/12/13/js-props/
3.1 client
只读，不能修改。
clientWidth / clientHeight
语法为元素.clientWidth/元素.clientHeight，它获取到的都是不带单位的数字，可以进行计算，获取到的宽高包括内容区和内边距。
总结：（高度同理）
- 无
padding无滚动条：
clientWidth= 盒子的width； - 有
padding无滚动条：
clientWidth= 盒子的width+ 盒子的padding×2； - 有
padding有滚动条：
clientWidth= 盒子和width+ 盒子的padding×2 - 滚动轴宽度。
clientTop / clientLeft
语法为元素.clientTop/元素.clientLeft，它获取到的数值就是外边框的宽高。
总结：（高度同理）
clientTop=border-top；clientLeft=border-left。
3.2 offset
只读，不能修改。
offsetWidth / offsetHeight
语法为元素.offsetWidth/元素.offsetHeight，它获取到的宽高包括外边框、内边距和内容区。
总结：（高度同理）
- 无
padding无border无滚动：
offsetWidth=clientWidth= 盒子宽度； - 有
padding有border无滚动：
offsetWidth
= 盒子宽度 + 盒子padding×2 + 盒子边框×2
=clientWidth+ 边框宽度×2； - 有
padding有border有滚动，且滚动是显示的：
offsetWidth
= 盒子宽度 + 盒子padding×2 + 盒子边框×2
=clientWidth+ 滚动轴宽度 + 边框宽度×2。
offsetTop / offsetLeft
它们获取到的数值为相对于其开启定位的父元素的偏移量。
3.3 scroll
只读，不能修改。
scrollWidth / scrollHeight
语法为元素.scrollWidth/元素.scrollHeight，它获取到的宽高不包括两侧滚动轴。
总结：（高度同理）
- 无滚动轴时：
scrollWidth=clientWidth= 盒子宽度 + 盒子padding×2； - 有滚动轴时：
scrollWidth= 实际内容的宽度 + 盒子padding×2。
scrollTop / scrollLeft
语法为元素.scrollTop/元素.scrollLeft，它获取到的数值是拖动滚动条时元素被卷起来的高度，简单来说，就是滚动条拖动了多长，它的值就是多少。
与前面不同，它是可读写的。
3.4 滚动条与阅读条款
在日常生活中，一些阅读条款需要保证用户阅读完才允许进行注册等后续行为。
我们可以通过对滚动条的拖动事件进行判断从而保证条款内容阅读到底。
以下有两个等式：
scrollWidth-scrollLeft==clientWidth，成立时说明水平滚动条拖动到底；scrollHeight-scrollTop==clientHeight，成立时说明垂直滚动条拖动到底。
可以把以上两条等式用于JS的判断条件中。
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
