样式属性命名——一种访问样式的简单方法

CSS样式名称和脚本中使用的名称之间存在差异，并且有些样式在不同的浏览器的表现是不一样的。CSS特性将多于一个单词的样式用连字符进行分割。JavaScript中可以使用带有连字符的样式名称，但是使用连字符就不能使用点运算符来访问样式：element.style.font-size ——这样是不被允许的。因此多个单词CSS样式名称作为属性名时，会转换为驼峰形式。 font-size 会转换为 fontSize ......

可以编写一个简单的API，在设置样式或者获取样式时自动将样式转换为驼峰形式。

<div style="color: red; font-size:10px; background-color: #eee;" ></div>

 

获取计算后的样式信息

测量元素的高度和宽度：height 和 width 这样的属性在不指定值的情况下，默认值为 auto ，让元素的大小根据其内容进行决定；所以如果没有显式提供特性字符串，则可以使用 offsetHeight 和 offsetWidth 来访问实际元素的高度和宽度，要注意两者获取到的值都包含padding 值。

然而如果元素的display值设置为 none时，尝试获取 offsetHeight 和 offsetWidth 的属性值，结果都是0 .

可以通过以下步骤来获取隐藏元素在非隐藏状态下的尺寸：

1、将display 属性设置为 block

2、将 visibility 设置为hidden （display 值设置为block后元素可见，为使其不可见，设置）

3、将position 设置为 absolute （visibility 设置为hidden 会导致元素位置出现空白，将position设置为 absolute 将元素移出正常可视区）

4、获取元素的尺寸

6、恢复先前修改的属性

具体代码如下：

 

控制台输出结果如下：

值得注意的是，可以通过检查一个元素的 offsetWidth 和 offsetHeight 的属性值是否为零来判断元素是否可见