DOMStyle样式对象的详细⽤法
对象的详细⽤法
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' >芒果</div>
var oV1 = ElementById('St1')
a)获取：x = oV1.Style.width
x = PropertyValue('height')
b)设置：oV1.style.backgroundColor = 'red';
oV1.Style.setProperty('height', '200px')
c)移出(2种)：oV1.style.font-family="";
veProperty("background-color")
d)所有内联样式 CSS 属性
style样式是个 CSSStyleDeclaration 对象，它不仅提供了单个 CSS 属性的访问⽅式，如cssText属性 ，也提供 setProperty()、getPropertyValue()及removeProperty() ⽅法
oV1.Style.cssText = " height:200px; width: 200px"
oV1.Style.cssText = '';
oV1.setAttribute('style', ' height:100px; width:100px');
仅能操作style属性中定义的内联样式,⽆法获取或设置样式表中的样式
定义2：内部样式表（style元素） Internal style sheet
其使⽤ <style> 标记将样式定义为内部块对象，内部样式只对所在的⽹页有效。
⽰例代码如下：嵌⼊ CSS 可以有效减少 HTTP 请求，提升页⾯性能
<head>
<style type="text/css">
<!--
//div（选择器）｛width: 100px;（样式声明）｝
div,h3 { width: 100px; } //两个标签选择符
#Id1 { width: 100px; height: 100px; } //⼀个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 = ElementById('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 {} 或者多个元素的⼀组声明 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; }
Safari看见的是【4条】规则：注意⼤写cssRules[0]、undefined
cssRules[1]、P
cssRules[2]、st[CLASSS~="test"]+* cssRules[3]、st[CLASSS~="test"] Safari则只取p。我才知道这是⼀种不正确的写法IE7看见了【5条】：注意⼤写
rules[0]、P
rules[1]、H2
rules[2]、H3
rules[3]、st + *
rules[4]、st
IE认为p,h2,h3是三条⽽不是⼀条规则，
Mozilla和Opera 9看见4条：注意⼩写cssRules[0]、undefined cssRules[1]、p,h2,h3
cssRules[2]、st + * cssRules[3]、st Mac IE也看见5条：注意⼤写
0、P
1、H2
2、H3
3、st * （注意没有+号）
4、st
Mac IE把选择器改成了st *，
这样含义就⾮常不⼀样了。⾮常严重的问题。
所以要访问st在Safari和Mozilla⾥需要cssRules[3]，⽽IE是rules[4]，早期的Mozilla是cssRules[5]。
没有关键字 ，所以如果使⽤索引值的话问题就⾮常严重。
我们希望能这样访问： document.styleSheets[1].cssRules['st']，这样我就能访问pre的样式表规则了。但是W3C或者其他浏览器貌似不需要这样的访问样式表的⽅法。但是所有的⽂档在这个问题上都保持沉默。
这个失败意味着你基本上没法访问规则了。
假设我们已经访问了⼀条规则。现在需要改变其中⼀条声明。
(1)表达式如下： lor = '#0000cc';
(2)W3C的⽅法是： rule.style.setProperty('color','#00cc00',null)；因为lor简单的多，所以我不想⽤这个。
例⼦：打算改变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 veRule){ veRule(position); }
c) 赋值，改动CSS样式
rules[0].lor='green'; //链接CSS样式中改动详细的属性
lor='blue'; //⾏内样式
4 单个操作或批量操作
a) 某元素Style属性的单个操作
obj.style.backgroundColor="red"; //注意，如果原来样式中有-，需要去掉，然后将后⾯的单词⾸字母⼤写
b) 某元素Style属性的批量操作
不仅有单个 CSS 属性的访问⽅式，如cssText属性
doc1.head.style.csstext="h3 {color:green;}" //⽹页的Style元素结点内容的修改
oV1.Style.cssText = " height:200px; width: 200px"
oV1.setAttribute('style', ' height:100px; width:100px');
obj.; //直接设置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。 ComputedStyle 还有另⼀种写法，就是 ComputedStyle 。
（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 这⾥代表任意字母)
place(/\-(\w)/g, function(all, letter) {
UpperCase();});
}
Attribute(camelize(style)); // 获取元素 element 的 style 属性样式
<style type="text/css">
<!--
div { width: 100px; }
#id3{ width: 100px; height: 100px; }
-->
</style>
<div id='id3'>test style</div>
function getStyle(oDiv, attr)
{ if (oDiv.currentStyle)
{return oDiv.currentStyle[attr]; //IE浏览器 }
else
{return getComputedStyle(oDiv, false)[attr]; } //Firefox浏览器
}
得到某元素的样式
获取最终样式(只能获取，不能操作)
oDiv1.currentStyle.attr // ( IE )
与浏览器的差异
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.LowerCase();
引用外部样式表的格式是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 ateElement("style"); //新建<stylr>元素
var ElementsByTagName("head").item(0); //取Head元素
var ElementsByTagName("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 ateTextNode();
s.appendChild(tn); //在IE中⾮法
head.insertBefore(s,link);
}
else {
s.innerHTML=cssStr; //在IE中⾮法
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论