JS——操作CSS样式

页面往往是动态变化的，我们经常需要在脚本里对元素的样式进行操作，刚学习js的时候大家都知道通过style属性设置css样式相关的属性，但有时候也想先获取样式，结果发现通过style取到的值是空，这就需要我们对这些概念足够熟练。

一、访问行内样式：

css样式包括三种：
外部样式、内部样式、行内样式。

这个style对象包含通过HTML的style属性设置的所有CSS样式信息，但不包含祥式表中的样式。因此，使用元素的syle属性只能访间行内样式，不能访问样式表的样式信息。
style对象可以通过cssText属性返回行内样式的字符串表示。字符串中去掉了包围属性和值的花括号，以及元素选择器名称。
除了csText属性外,style对象还包含每一个与css属性-映射的脚本属性)。

含有连字符的多词属性(如font-family)在JavaScript中会删除这些连字符，以驼峰命名法重新命名CSS的脚本属性名称(如fontFamily)。
例子： 对于border-right-color属性来说，在脚本中应该使用/borderRightColor,
所以下面页面脚
本中的用法都是错误的。

代码如下：

<div id="box" >盒子</div>
<scrip>
var box = document. getElementById("box");
box.style.border-right-color= "red";
box.style,border-right-style = "solid";
</script>

针对上面页面脚本，可以修改为:

<script>
Varb dcuent gelemenBnld"borx
box.style. brderRighColor = "red";
box. style brderRighsyle -“olid';
</script>

提示:使用CSS脚本属性时，应该注意几个问题:
1.由于float是js保留字，禁止使用，英雌使用cssFloat表示float属性的脚本名称
2.在js中，所有CSS属性值都是字符串，必须加上应该好，以表示字符串数据类型
3.在脚本中可以动态设置属性值，但最终赋值给属性的值是字符串

二、使用style:

DOM样式规范给style对象动议了一些属性和方法。具体如下：
1.cssText:访问HTML标签中style属性的CSS代码
2.lengh:元素定义CSS属性的数量
3.partentRule:表示CSS的CSSRule对象
4.getPropertyCSSValue（）:返回包含给定属性值的CSSValue对象
5.getPropertyPriority（）:返回给指定CSS属性是否附加了！important命令
6.item():返回给定位置的CSS的名称
7.getPropertyValue():返回给定属性的字符串值
8.removeProperty():从样式中删除
9.setProperty():给定属性设置相应的值，优先权标志

1.使用getPropertyValue()方法：
作用：能够获取指定元素样式属性的值
语法如下：

var value=e.style.getPropertyValue(properName)

properName表示CSS属性值名称，不是脚本属性名，对于复合名应该使用连字符进行连接
例子：使用getPropertyValue()获取行内width值，代码如下;