样式属性即操作在DOM2级中的变化

xiaoxiao2021-03-25 147

1.float样式属性在DOM2中的变化

在DOM2级中规定float样式属性的访问方式可以是：cssFloat(chrom、Firefox)、styleFloat，但是也可以直接使用float来访问float样式属性

2.style对象在DOM2级中的变化

新增了属性和方法 1.cssText：某个元素所有样式值拼接的字符串 2.length：返回样式个数 3.item：获取指定位置上的样式 4.getPropertyValue(属性名)：获取对应样式属性名的样式属性值 5.removeProperty(属性名)：删除样式 6.setProperty(属性名，属性值，优先级)：设置属性

3.获取计算后的样式

1.在chrom，firefox中：document.defaultView.getComputedStyle.getPropertyValue(属性名) 2.在IE中：document.currenStyle.属性名

4.操作样式表

1.styleSheets对象：这是一个类数组对象，保存了所有link和style方式引入的样式表，其中保存的对象是CSSStyleSheet，如：document.styleSheets 2.CSSStyleSheet：这对象表示style或link对应的样式表对象，包括的属性： 1.disabled：样式表是否可用，true不可用，false可用 2.href：link元素的href属性的值，如果是style元素那么为null 3.cssRules：是一个类数组对象，保存了所有的样式规则对象 CSSStyleRule， // IE8以下中为rules属性 CSSStyleRule这个对象包含属性和方法： 1.cssText：样式规则字符串，包含选择器如： cssText : "#box { width: 200px; height: 200px; } //IE8中没有这个属性

2.style：就是CSSStyleDeclaration即我们常获取的style对象

3.selectorText：样式规则的选择器如：#box

4.insertRule（规则字符串，位置）：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>demo</title> <style> #box{ width:200px; height: 200px; background-color: #2c82c9; } body{margin: 0px; padding: 0px;} </style> <link type="text/css" rel="stylesheet" href="edit/css/font-awesome.css"> </head> <body> <div id="box">fsfdsf</div> </body> <script> var sheet=document.getElementsByTagName("style")[0].sheet; insertRule(sheet,"#box","background-color:red",sheet.cssRules[0].style.length-1); function insertRule(sheet, selectorText, cssText, position){ if (sheet.insertRule){ //chrom 、firefox sheet.insertRule(selectorText + "{" + cssText + "}", position); } else if (sheet.addRule){ //IE sheet.addRule(selectorText, cssText, position); } } </script> </html> 5.deleteRule(样式属性位置) //chrom、firefox 或 removeRule //ie

4.ownerNode：样式表对应的元素节点对象，一般指style和link

备注：获取CSSStyleSheet对象的方式是：先获取style或link元素节点对象，然后使用sheet（chrom、firefox）或styleSheet（IE）直接获取到

转载请注明原文地址: https://ju.6miu.com/read-2978.html

技术

最新回复(0)