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

最新推荐文章于 2023-06-13 10:59:25 发布

双方的范围

最新推荐文章于 2023-06-13 10:59:25 发布

阅读量256

点赞数 1

分类专栏： JavaScript自学

本文链接：https://blog.csdn.net/u013500740/article/details/60873464

版权

JavaScript自学专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

双方的范围

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式属性即操作在DOM2级中的变化

1.float样式属性在DOM2中的变化在DOM2级中规定float样式属性的访问方式可以是：cssFloat(chrom、Firefox)、styleFloat，但是也可以直接使用float来访问float样式属性2.style对象在DOM2级中的变化新增了属性和方法1.cssText：某个元素所有样式值拼接的字符串2.length：返回样式个数3.item：获取指
复制链接

扫一扫

专栏目录