规范
<style type="text/css"></style>
<script type="text/javascript"></script>
读写样式属性
.style是访问不到css样式表的，只能访问到行内/内联的属性，当未设置行内属性时，结果为空字符串
- 设置时，对复合值需要拆解赋值，不拆解效率更低
oDiv.style.weight='200px';
oDiv.style.border='5px solid #000';
// 更合适的写法如下，拆解
oDiv.style.borderWidth='5px';
oDiv.style.borderStyle='solid';
oDiv.style.borderColor='#000';
- 设置float要写成cssFloat(虽然设置float也有效果但是不规范，float是css中的保留字，也有浮点的含义)
查看元素css属性
1. 元素.style
对于不同的盒子模型是什么
- 当给元素设置了行内样式时
- 当元素未设置内联样式时
2. window.getComputedStyle(elem,null)
- 查看计算样式
- 返回值是类数组
- 属性是只读的
- 是绝对值（非数学意义上的绝对值）：em、rem转换为px，十六进制转换为rgb
- IE8及以下不支持
Failed to set the ‘background’ property on ‘CSSStyleDeclaration’: These styles are computed, and therefore the ‘background’ property is read-only.
at HTMLDivElement.oDiv.onclick
-
获取元素行内、css样式表
-
.style和getComputedStyle的区别
-
IE8支持
elem.currentStyle -
该方法获取到的height是否是盒子的实际高度，是由盒子模型决定的
-
【兼容】
function getStyles(elem, prop) {if (window.getComputedStyle) {if (prop) {return window.getComputedStyle(elem, null)[prop];} else {return window.getComputedStyle(elem, null);}} else {if (prop) {return elem.currentStyle[prop];} else {return elem.currentStyle;}}
}
3.offsetWidth/offsetHeight
- 访问元素的实际宽高
- 包含元素的padding、border（box-sizing为content-box时）
- 会在元素渲染后访问（即使设置的是css样式表也能）
- box-sizing为content-box时，长大的速度更快，因为始终获得都是真实宽高，起始的基数不一样
- 在js运动中的问题，如果设置的是css样式表
box-sizing为content-box时
- 使用
box-sizing:border-box;，初始的盒子变小了
box-sizing为content-box时
操作伪元素
- 操作伪元素最好的方法就是使用类名控制
- window.getComputedStyle(elem,null)第二个参数传值可以获取after元素的只读属性
下拉选组件动画
- 要点，每次触发时需要先清空定时器，否则出现抖动（当mouseenter时未完全展开就mouseleave，enter的定时器还在执行，就开始了leave的定时器）
