DOM Style样式对象的详细用法
HTML Style样式比较复杂,相应访问、修改方法也有所差异。参考相关资料,整理如下。
典型Html文件如下,有三种定义方式。
<head> |
<style type="text/css"> |
/* 内部样式 */ |
h3 {color:green;} |
</style> |
<!-- 外部样式 style.css --> |
<link rel="stylesheet" type="text/css" href="style.css"/> |
<!-- 在外部的styles.css文件中,代码如下: |
h3 {color:blue;} --> |
</head> |
<body> |
<h3 style ="color:Black;" >测试!</h3> |
</body> |
定义1:行内样式, (内联样式)Inline style
任何HTML元素标签都会有一个通用的属性style。它会返回CSSStyleDeclaration对象。
样式定义在HTML元素的标准属性style里
a 将分号『;』隔开的一个或者多个属性:值(其全部为元素的style属性的值)
b 属性和属性值之间用 『:』连接
下面我们看几个最常见的行内style样式的访问方式。Style在元素节点内,style可读可写;
<div id='St1' style="font-family:Arial,Helvetica;width:100px;
height:100px; color:red;">芒果</div>
var oV1 = document.getElementById('St1')
a)获取:x = oV1.Style.width
x = oV1.Style.getPropertyValue('height')
b)设置:oV1.style.backgroundColor = 'red';
oV1.Style.setProperty('height', '200px')
c)移出(2种):oV1.style.font-family="";
oV1.style.removeProperty("background-color")
d)所有内联样式 CSS 属性
style样式是个 CSSStyleDeclaration 对象,它不仅提供了单个 CSS 属性的访问方式,如cssText属性 ,也提供
setProperty()、getPropertyValue()及removeProperty() 方法
oV1.Style.cssText = "background-color:red; height:200px; width: 200px"
oV1.Style.cssText = '';
oV1.setAttribute('style', 'background-color:blue; height:100px;
width:100px');
oV1.getAttribute('style');
oV1.removeAttribute('style');
仅能操作style属性中定义的内联样式,无法获取或设置样式表中的样式
定义2:内部样式表(style元素) Internal style sheet
其使用 <style> 标记将样式定义为内部块对象,内部样式只对所在的网页有效。
示例代码如下: 嵌入 CSS 可以有效减少 HTTP 请求,提升页面性能
<head>
<style type="text/css">
<!--
//div(选择器) {width:
100px;(样式声明) }
div,h3 {
background-color: black; width: 100px; } //两个标签选择符
#Id1 { width: 100px; height: 100px; background-color: red;
} //一个id选择符
.c3 {
color:blue;} //class选择符
p.cla4 { color:#fff; background:#070;} /*
一个元素、一个class选择符
-->
</style>
<style type="text/css"> @import url(sty2.css);
</style> //导入式
<link rel="stylesheet" type="text/css" href="wider.css">
//外部链接式(rel,type不要动)
</head>
//wider.css中的定义 #box { width: 200px; }
function getStyle(oDiv, attr){
if (oDiv.currentStyle) {return
oDiv.currentStyle[attr]; //针对IE浏览器 }
else {return getComputedStyle(oDiv, false)[attr]; }
//Firefox浏览器
}
<div id="id1" class="c3" >test
style</div>
var oT1 = document.getElementById('id1');
var a =
getStyle(oT1, 'width');
使用style属性可以设置行内的CSS样式,而通过id和class调用时最常用的方法。
CSSStyleSheet类型表示通过<link>元素(HTMLLinkElement对象)和<style>元素(HTMLStyleElement对象)包含的样式表。
样式表中一个大括号就是一个cssRule对象
var
sheet=link.sheet||link.styleSheet;
//(非IE)使用sheet属性,(IE)使用styleSheet得到这个类型
var
sheet=document.styleSheets[i]; //styleSheets: 获得当前网页的所有样式表对象
定义3:外部样式表(引用一个CSS样式表文件)Rules或rules
(1) DOM(document对象)对象模型中有几个重要的集合
doc1.images [HTMLCollection]
所有图像
doc1.anchors [HTMLCollection] 所有锚点
doc1.styleSheets
[StyleSheetList] 所有样式
doc1.links [HTMLCollection] 所有链接
其中styleSheets包含所有的样式集合
(2) 样式表集合styleSheets
-> 规则(选择器及样式)(css)rules ->某一样式.属性
style.attr
一个style元素标签(一个样式表) var
sheet=document.styleSheets[0]
规则集合(选择器及样式集合) vsr Rules =sheet.cssRules||sheet[0].rules;
//W3C用cssRules //微软rules
第一个规则(选择器及样式) var
rule=doc1.styleSheets[0].rules[0] //rules[0](IE),CSSRules[0](非IE)
var rule=sheet.cssRules[0]|| sheet.rules[0];
style标签或单个Style的全部内容 head.style.cssText,
oV1.style.cssText 或
rules[0].style.cssText
style标签中一个大括号就是一个(css)Rule对象,cssRules(非IE)|rules(IE)可返回某一样式表中全部选择器的集合列表,可以通过CSSRules[0](非IE)和rules[0]属性(IE)来进行访问。第一条规则就是(css)Rules[0],第二条就是(css)Rules[1]等等。
一条规则就是一个元素的声明 p {background-color: #ffffff;}
或者多个元素的一组声明 div,h3,p{color:blue;width: 100px;}
(IE还将其分为3条)。可以对每个样式进行具体的操作(可读可写)。
通过 className 修改样式
, 获取或修改某个属性的值(兼容性问题)
doc1.styleSheets[0].(css)rules[index].style.attr //IE,W3C为(css),查找样式表中的样式属性(ie chrom)
(3) style样式,规则(css)rules在各浏览器中差异
例:下列样式表在不同浏览器的解释
@import url("test.css"); p,h2,h3 {padding-right: 10px; } pre.test + * {margin-right: 20%; } pre.test {background-color: #ffffff; } |
|
Safari看见的是【4条】规则: 注意大写 cssRules[0]、undefined cssRules[1]、P cssRules[2]、PRE.test[CLASSS~="test"]+* cssRules[3]、PRE.test[CLASSS~="test"] Safari则只取p。我才知道这是一种不正确的写法 |
IE7看见了【5条】: 注意大写 rules[0]、P rules[1]、H2 rules[2]、H3 rules[3]、PRE.test + * rules[4]、PRE.test IE认为p,h2,h3是三条而不是一条规则, |
Mozilla和Opera 9看见4条: 注意小写 cssRules[0]、undefined cssRules[1]、p,h2,h3 cssRules[2]、pre.test + * cssRules[3]、pre.test |
Mac IE也看见5条: 注意大写 0、P 1、H2 2、H3 3、PRE.test * (注意没有+号) 4、PRE.test Mac IE把选择器改成了pre.test *, |
所以要访问pre.test在Safari和Mozilla里需要cssRules[3],而IE是rules[4],早期的Mozilla是cssRules[5]。
没有关键字 ,所以如果使用索引值的话问题就非常严重。
我们希望能这样访问:
document.styleSheets[1].cssRules['PRE.test'],这样我就能访问pre的样式表规则了。但是W3C或者其他浏览器貌似不需要这样的访问样式表的方法。但是所有的文档在这个问题上都保持沉默。
这个失败意味着你基本上没法访问规则了。
假设我们已经访问了一条规则。现在需要改变其中一条声明。
(1)表达式如下: rule.style.color = '#0000cc';
(2)W3C的方法是:
rule.style.setProperty('color','#00cc00',null);因为style.color简单的多,所以我不想用这个。
例子:打算改变pre的颜色,代码如下:
为了保证能用,我把pre的规则写在最后一条。很丑,但是这是唯一的办法:
function changeIt() {
if
(!document.styleSheets) return;
var theRules = new Array();
if
(document.styleSheets[1].cssRules) theRules =
document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules
else return;
theRules[theRules.length-1].style.backgroundColor = '#EEF0F5';
}
(4) style样式的添加或删除
doc1.styleSheets[0].insertRule(“selector{attr:value}”, index); //非IE
doc1.styleSheets[0].deleteRule(index); //非IE
doc1.styleSheets[0].addRule(“selector”,”attr:value”, index); //IE
doc1.styleSheets[0].removeRule(index); //IE
a) 插入函数
function insertRule(sheet,selectorText,cssText,position){
if(sheet.insertRule){
sheet.insertRule(selectorText+'{'+cssText+'}',position); }
else
if(sheet.addRule){ sheet.addRule(selectorText,cssText,position); }
b) 删除函数
function deleteRule(sheet,position){
if (sheet.deleteRule)
sheet.deleteRule(position); //非IE ,假设这样的方式存在
else if(sheet.removeRule){
sheet.removeRule(position); }
c) 赋值,改动CSS样式
rules[0].style.color='green';
//链接CSS样式中改动详细的属性
oDiv1.style.color='blue'; //行内样式
4 单个操作 或 批量操作
a) 某元素Style属性的单个操作
obj.style.backgroundColor="red";
//注意,如果原来样式中有-,需要去掉,然后将后面的单词首字母大写
b) 某元素Style属性的批量操作
不仅有单个 CSS 属性的访问方式,如cssText属性
doc1.head.style.csstext="h3 {color:green;}" //网页的Style元素结点内容的修改
oV1.Style.cssText = "background-color:red; height:200px; width: 200px"
oV1.setAttribute('style', 'background-color:blue; height:100px;
width:100px');
oV1.removeAttribute('style');
obj.style="height:500px;color:red;"; //直接设置style对象,注意style的格式
obj.className="test";
//指定obj的className属性,给它类选择器名
obj.className="test demo"; //使用className设置属性 //注意空格 ,可以指定多个类
obj.className=""; //删除样式
5 多重样式的计算(Multiple Styles):
由于外部样式、内部样式和行内样式可能同时作用于某一个元素,此外如DIV,P等元素内部还可能有子元素节点而产生的样式嵌*象,于是就有了多重样式。
此种情况下,样式就有了优先级,一般(行内)Inline style > (内部样式)Internal style
sheet >(Css外部样式)External style sheet。有一套比较复杂的计算优先级的方法。
有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
对于多种样式的复合情况下真实的样式信息,就需要通过计算,来获得样式,即计算样式(当然也就只读了)。
(非IE)window对象下提供了getComputedStyle()方法。接受两个参数,需要计算的样式元素,第二个伪类(:hover),如果没有伪类,就填null。 window.getComputedStyle
还有另一种写法,就是 document.defaultView.getComputedStyle 。
(IE)使用 currentStyle 属性,IE 中使用 getAttribute
。currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性,那么传入的参数应该是
fontSize。因此在IE 中要获得单个属性的值,就必须将属性名转为驼峰形式。
// IE 下将 CSS 命名转换为驼峰表示法 // font-size --> fontSize // 利用正则处理一下就可以了 function camelize(attr) { // /\-(\w)/g 正则内的 (\w) 是一个捕获,捕获的内容对应后面 function 的 letter // 意思是将 匹配到的 -x 结构的 x 转换为大写的 X (x 这里代表任意字母) return attr.replace(/\-(\w)/g, function(all, letter) { return letter.toUpperCase();}); } element.currentStyle.getAttribute(camelize(style)); // 获取元素 element 的 style 属性样式 |
<style type="text/css"> <!-- div { background-color: black; width: 100px; } #id3{ width: 100px; height: 100px; background-color: red; } --> function getStyle(oDiv, attr) var test = document.getElementById('id3'); //得到某元素的样式 |
获取最终样式(只能获取,不能操作)
oDiv1.currentStyle.attr // (
IE )
window.getComputedStyle(oDiv1,null).attr //( W3C )
6 使用脚本添加样式与浏览器的差异
当在连接外部样式后,再在其后面使用JavaScript
脚本插入内部样式时(即内部样式使用脚本创建),
<html><head>
<title> demo
</title>
<link rel="stylesheet" href="styles.css"
type="text/css" /> // <!-- 添加外部CSS 样式 -->
<!--
在外部的styles.css文件中,代码如下:
h3 {color:blue;}
-->
<script type="text/javascript"> // <!-- 使用javascript
创建内部CSS 样式 -->
<!--
(function(){
var agent =
window.navigator.userAgent.toLowerCase();
var is_op =
(agent.indexOf("opera") != -1);
var is_ie = (agent.indexOf("msie") != -1)
&& document.all && !is_op;
var is_ch =
(agent.indexOf("chrome") != -1);
var cssStr="h3
{color:green;}"; //样式
var s=document.createElement("style");
//新建<stylr>元素
var
head=document.getElementsByTagName("head").item(0); //取Head元素
var
link=document.getElementsByTagName("link"); //取Link
link=link.item(0);
if (is_ie){
if
(link) head.insertBefore(s,link);
else head.appendChild(s);
document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
//最后一个Style所有内容
}
else if(is_ch){
var
tn=document.createTextNode();
tn.nodeValue=cssStr;
s.appendChild(tn); //在IE中非法
head.insertBefore(s,link);
}
else {
s.innerHTML=cssStr; //在IE中非法
head.insertBefore(s,link);
}
})();
//-->
</script>
</head> <body>
<h3>在IE中我是绿色,非IE浏览器下我是蓝色!</h3>
</body></html>
结果:在Firefox
/ Chrome / Safari / Opera 中,文字都是蓝色的。而在IE 浏览器中,文字却是绿色的。