您的位置：首页 > Web前端 > CSS

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

2017-03-08 15:36 337 查看

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）直接获取到

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航