原生JS操作CSS样式

发布时间：2020-12-14 23:51:58 所属栏目：资源来源：网络整理

导读：为了使得页面上的元素能够随着用户的操作而“动”起来，我们常常需要用JS去操作一些元素的CSS样式，最简单的如隐藏、显示。摆脱jQ库，我们现在用原生的JS来操作CSS样式。行内样式（可读可写） CSS属性 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?JS调用 color ? ? ? ?

为了使得页面上的元素能够随着用户的操作而“动”起来，我们常常需要用JS去操作一些元素的CSS样式，最简单的如隐藏、显示。

摆脱jQ库，我们现在用原生的JS来操作CSS样式。

行内样式（可读可写）

CSS属性 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?JS调用

color ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style.color

font-size ? ? ? ? ? ? ? ? ? ? ? ? ? ?style.fontSize

float ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style.cssFloat(IE9+) ? style.styleFloat(IE，其中在Edge下无效) ? ?style.float均支持

…..

注：写时，有单位的，也得带上。

操作单个行内样式十分的简单，只需取出需要改的DOM元素，在使用style.加属性对应的CSS名字就行，如果属性名是复合的，只要改成驼峰命名发就行了。

操作整个行内样式：

style.cssText ? // 获取整个行内样式（字符串形式），注：赋值时是以覆盖这种形式的。
style.length ? ? // 行内样式的个数 （IE9+）
style.removeProperty('background-color') ?// 移除css属性（IE9+）
style.setProperty('background-color','blue') // 设置css属性（IE9+）

注：以上两个方法在IE9下不报错，但是没效果。

计算后的样式（只读）

W3C标准：window.getComputedStyle(”,null).样式 ? ? ?(IE9+) ? ? ? ?第一个参数是DOM对象，第二个参数是伪类，无则null

IE：对象.currentStyle.样式 (IE8-)

这些方法获得的CSS的值都是浏览器计算后的值，所以是不可以赋值的。

内联样式和外联样式

CSSStyleSheet集合

document.styleSheets ?// styleSheetList集合 ? ?该属性会获得所有style元素和link元素（必须含有rel="styleSheet"）
document.styleSheets[0] ?// CSSStyleSheet ?我们需要的对象，可以对CSSStyleSheet进行CSS的操作。

还有其他的方法可以获得页面中的CSSStyleSheet ：

document.getElementsByTagName('link')[0] // HTMLLinkElement ?(IE8+)
document.getElementsByTagName('style')[0] // HTMLLinkElement ?(IE8+)

W3C标准：HTMLLinkElement对象和HTMLLinkElement对象后调用sheet属性会得到CSSStyleSheet（IE9+）

document.getElementsByTagName('link')[0].sheet ? ? // ?CSSStyleSheet
document.getElementsByTagName('style')[0].sheet ? ?// ?CSSStyleSheet

IE下：需要使用styleSheet属性（IE10-）

document.getElementsByTagName('link')[0].styleSheet ? ? // ?CSSStyleSheet
document.getElementsByTagName('style')[0].styleSheet    // ?CSSStyleSheet

到这，我们已经使用了两种方法获得了CSSStyleSheet对象了。

在CSSStyleSheet对象下，有几个比较常用的属性和方法。当然这还是得区分IE和W3C的。

W3C的属性和方法：（IE9+）

disabled ? ? ? ? ? ? ? // 获取或设置样式表是否被禁用
type ? ? ? ? ? ? ? ? ? ? ?//?获取样式表的种类 ? ?（设置时不报错，但无效）
media ? ? ? ? ? ? ? ? ?//?获取样式表的媒体类型 ?（设置时不报错，但无效）
cssRules ? ? ? ? ? ? // CSSStyleList集合，样式规则集合
ownerRule ? ? ? ? // @import导入时，指向表示导入的规则
deleteRule(index) ?// ?删除集合中指定的规则（index是规则序号）
insertRule(rule,index) ?// 向集合中添加指定的规则

// 删除第一个link标签(rel="stylesheet")下的第一个样式规则，在删除之后，所有的规则的序号就前移了一个。
document.getElementsByTagName('link')[0].sheet.deleteRule(0) ;
// 在第三个规则之后增加一个规则
document.getElementsByTagName('link')[0].sheet.insertRule('#box{background-color:blue}',3);

IE下的属性和方法：（IE8-）

disabled ??// 获取或设置样式表是否被禁用
rules ? ? ? ??// CSSStyleList集合，样式规则集合
removeRule(index)?// ?删除集合中指定的规则（index是规则序号）
addRule(selector,rule,index) ?// 向集合中添加指定的规则

// 删除第一个link标签（rel="stylesheet"）下的第一个样式规则
document.getElementsByTagName('link')[0].styleSheet.removeRule(0);
// 在第三个规则后增加一个规则
document.getElementsByTagName('link')[0].styleSheet.addRule('#box','background-color:blue',3);

CSSStyleList集合

在CSSStyleSheet上调用cssRules或rules属性后，我们就可以得到样式规则集合，CSSStyleList集合，集合中的值是CSSStyleRule对象。其中，CSSStyleList集合是一个含length的对象。

对于CSSStyleRule对象，有几个常用的属性：

cssText ? ? ? ? ? // ?获取当前整个规则对应的文本 (rules不支持)
selectorText ?// ?获取当前规则的选择器文本
style ? ? ? ? ? ? ? ?// 返回CSSStyleDeclaration对象，可以像操作行内样式一样操作对应的那条规则（有cssText属性，同行内）

注：在chrome下操作CSSStyleRule对象时，当对link标签下的规则操作时，需要在本地启动服务器，应该是chrome下的安全策略吧。且在新版的chrome下（版本 50.0.2661.87），rules和cssRules是都支持的，且一致。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!