css样式代码⼤全_12.2样式
在 HTML 中定义样式的⽅式有 3 种：通过<link/>元素包含外部样式表⽂件、使⽤<style/>元素定义嵌⼊式样式，以及使⽤ style 特性定义针对特定元素的样式。“DOM2 级样式”模块围绕这 3 种应⽤样式的机制提供了⼀套 API。要确定浏览器是否⽀持 DOM2 级定义的 CSS 能⼒，可以使⽤下列代码。
var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");
12.2.1 访问元素的样式
任何⽀持 style 特性的 HTML 元素在 JavaScript 中都有⼀个对应的 style 属性。这个 style 对象是 CSSStyleDeclaration 的实例，包含着通过 HTML 的 style 特性指定的所有样式信息，但不包含与外部样式表或嵌⼊样式表经层叠⽽来的样式。在 style 特性中指定的任何CSS 属性都将表现为这个style 对象的相应属性。对于使⽤短划线（分隔不同的词汇，例如 background-image）的 CSS 属性名，必须将其转换成驼峰⼤⼩写形式，才能通过 JavaScript 来访问。下表列出了⼏个常见的 CSS 属性及其在 style 对象中对应的属性名。
多数情况下，都可以通过简单地转换属性名的格式来实现转换。其中⼀个不能直接转换的 CSS 属性就是
float。由于 float 是 JavaScript 中的保留字，因此不能⽤作属性名。“DOM2 级样式”规范规定样式对象上相应的属性名应该是 cssFloat；Firefox、Safari、Opera 和Chrome 都⽀持这个属性，⽽ IE⽀持的则是 styleFloat。
只要取得⼀个有效的 DOM 元素的引⽤，就可以随时使⽤ JavaScript 为其设置样式。以下是⼏个例⼦。
var myDiv = ElementById("myDiv");
//设置背景颜⾊
myDiv.style.backgroundColor = "red";
//改变⼤⼩
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定边框
myDiv.style.border = "1px solid black";
在以这种⽅式改变样式时，元素的外观会⾃动被更新。
通过 style 对象同样可以取得在 style 特性中指定的样式。以下⾯的 HTML 代码为例。
<div id="myDiv" ></div>
在 style 特性中指定的样式信息可以通过下列代码取得。
alert(myDiv.style.backgroundColor); //"blue"
alert(myDiv.style.width); //"10px"
alert(myDiv.style.height); //"25px"
如果没有为元素设置 style 特性，那么 style 对象中可能会包含⼀些默认的值，但这些值并不能准确地反映该元素的样式信息。
1. DOM 样式属性和⽅法
“DOM2级样式”规范还为 style 对象定义了⼀些属性和⽅法。这些属性和⽅法在提供元素的 style特性值的同时，也可以修改样式。下⾯列出了这些属性和⽅法。
cssText：如前所述，通过它能够访问到 style 特性中的 CSS 代码。
length：应⽤给元素的 CSS 属性的数量。
parentRule：表⽰ CSS 信息的 CSSRule 对象。本节后⾯将讨论 CSSRule 类型。
getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。
getPropertyPriority(propertyName)：如果给定的属性使⽤了!important 设置，则返回
"important"；否则，返回空字符串。
getPropertyValue(propertyName)：返回给定属性的字符串值。
item(index)：返回给定位置的 CSS 属性的名称。
removeProperty(propertyName)：从样式中删除给定属性。
setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先
权标志（"important"或者⼀个空字符串）。
通过cssText 属性可以访问 style特性中的 CSS代码。在读取模式下，cssText 返回浏览器对style特性中 CSS 代码的内部表⽰。在写⼊模式下，赋给 cssText 的值会重写整个 style 特性的值；也就是说，以前通过 style 特性指定的样式信息都将丢失。例如，如果通过 style 特性为元素设置了边框，然后再以不包含边框的规则重写 cssText，那么就会抹去元素上的边框。下⾯是使⽤ cssText 属性的⼀个例⼦。
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);
设置 cssText 是为元素应⽤多项变化最快捷的⽅式，因为可以⼀次性地应⽤所有变化。
设计 length 属性的⽬的，就是将其与 item()⽅法配套使⽤，以便迭代在元素中定义的 CSS 属性。 在使⽤ length 和 item()时，style 对象实际上就相当于⼀个集合，都可以使⽤⽅括号语法来代替item()来取得给定位置的 CSS 属性，如下⾯的例⼦所⽰。
for (var i=0, len=myDiv.style.length; i < len; i++){
alert(myDiv.style[i]); //或者 myDiv.style.item(i)
}
⽆论是使⽤⽅括号语法还是使⽤ item()⽅法，都可以取得 CSS 属性名（"background-color"，
不是"backgroundColor"）。然后，就可以在 getPropertyValue()中使⽤取得的属性名进⼀步取得属性的值，如下所⽰。
var prop, value, i, len;
for (i=0, len=myDiv.style.length; i < len; i++){
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = PropertyValue(prop);
alert(prop + " : " + value);
}
getPropertyValue()⽅法取得的始终都是 CSS 属性值的字符串表⽰。如果你需要更多信息，可以使⽤ getPropertyCSSValue()⽅法，它返回⼀个包含两个属性的 CSSValue 对象，这两个属性分别是：cssT
ext 和 cssValueType。其中，cssText 属性的值与getPropertyValue()返回的值相同， ⽽ cssValueType 属性则是⼀个数值常量，表⽰值的类型：0 表⽰继承的值，1 表⽰基本的值，2 表⽰ 值列表，3 表⽰⾃定义的值。以下代码既输出 CSS 属性值，也输出值的类型。
var prop, value, i, len;
for (i=0, len=myDiv.style.length; i < len; i++){
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = PropertyCSSValue(prop);
alert(prop + " : " + value.cssText + " (" + value.cssValueType + ")");
}
在实际开发中，getPropertyCSSValue()使⽤得⽐ getPropertyValue()少得多。IE9+、Safarie 3+以及 Chrome ⽀持这个⽅法。Firefox 7 及之前版本也提供这个访问，但调⽤总返回 null。
要从元素的样式中移除某个 CSS 属性，需要使⽤ removeProperty()⽅法。使⽤这个⽅法移除⼀ 个属
性，意味着将会为该属性应⽤默认的样式（从其他样式表经层叠⽽来）。例如，要移除通过 style特性设置的 border 属性，可以使⽤下⾯的代码。
veProperty("border");
在不确定某个给定的 CSS 属性拥有什么默认值的情况下，就可以使⽤这个⽅法。只要移除相应的属性，就可以为元素应⽤默认值。
2. 计算的样式
虽然 style 对象能够提供⽀持 style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠⽽来并影响到当前元素的样式信息。“DOM2 级样式”增强了 document.defaultView，提供了 getComputedStyle()⽅法。这个⽅法接受两个参数：要取得计算样式的元素和⼀个伪元素字符串（例 如":after"）。如果不需要伪元素信息，第⼆个参数可以是 null。getComputedStyle()⽅法返回⼀个CSSStyleDeclaration 对象（与 style 属性的类型相同），其中包含当前元素的所有计算的样式。
以下⾯这个 HTML 页⾯为例。
<!DOCTYPE html>
<html>
<head>
<title>Computed Styles Example</title>
<style type="text/css">
#myDiv {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="myDiv" ></div>
</body>
</html>
应⽤给这个例⼦中<div>元素的样式⼀⽅⾯来⾃嵌⼊式样式表（<style>元素中的样式），另⼀⽅ ⾯来⾃其 style 特性。但是，style 特性中设置了 backgroundColor 和 border，没有设置 width 和 height，后者是通过样式表规则应⽤的。以下代码可以取得这个元素计算后的样式。
var myDiv = ElementById("myDiv");
var computedStyle = ComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); // "red"
alert(computedStyle.width); // "100px"
alert(computedStyle.height); // "200px"
alert(computedStyle.border); // 在某些浏览器中是"1px solid black"
在这个元素计算后的样式中，背景颜⾊的值是"red"，宽度值是"100px"，⾼度值是"200px"。我 们注意到，背景颜⾊不是"blue"，因为这个样式在⾃⾝的 style 特性中已经被覆盖了。边框属性可能 会也可能不会返回样式表中实际的 border 规则（Opera 会返回，但其他浏览器不会）。存在这个差别的原因是不同浏览器解释综合（rollup）属性（如 border）的⽅式不同，因为设置这种属性实际上会涉及 很多其他属性。在设置 border 时，实际上是设置了四个边的边框宽度、颜⾊、样式属性 （ border-left-width 、 border-top-color 、 border-bottom-style ， 等 等 ）。 因 此 ， 即 使 computedStyle.border 不会在所有浏览器中都返回值，但
computedStyle.borderLeftWidth 会 返回值。
IE 不⽀持 getComputedStyle()⽅法，但它有⼀种类似的概念。在 IE 中，每个具有 style 属性 的元素还有⼀个 currentStyle 属性。这个属性是 CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式。取得这些样式的⽅式也差不多，如下⾯的例⼦所⽰。
var myDiv = ElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined
与 DOM 版本的⽅式⼀样，IE 也没有返回 border 样式，因为这是⼀个综合属性。
⽆论在哪个浏览器中，最重要的⼀条是要记住所有计算的样式都是只读的；不能修改计算后样式对象中的 CSS 属性。此外，计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的 CSS 属性都会表现在计算后的样式中。例如，所有浏览器中的 visibility 属性都有⼀个默认值， 但这个值会因实现⽽异。在默认情况下，有的浏览器将 visibility 属性设置为"visible"，⽽有的浏览器则将其设置为"inherit"。换句话说，不能指望某个 CSS 属性的默认值在不同浏览器中是相同的。如果你需要元素具有某个特定的默认值，应该⼿⼯在样式表中指定该值。
12.2.2 操作样式表
CSSStyleSheet 类型表⽰的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义 的样式表。有读者可能记得，这两个元素本⾝分别是由 HTMLLinkElement 和 HTMLStyleElement 类型 表⽰的。但是，CSSStyleSheet 类型相对更加通⽤⼀些，它只表⽰样式表，⽽不管这些样式表在 HTML
中是如何定义的。此外，上述两个针对元素的类型允许修改 HTML 特性，但 CSSStyleSheet 对象则是⼀套只读的接⼝（有⼀个属性例外）。使⽤下⾯的代码可以确定浏览器是否⽀持 DOM2 级样式表。
var supportsDOM2StyleSheets =
document.implementation.hasFeature("StyleSheets", "2.0");
CSSStyleSheet 继承⾃ StyleSheet，后者可以作为⼀个基础接⼝来定义⾮ CSS 样式表。从
StyleSheet 接⼝继承⽽来的属性如下。
好看的css代码disabled：表⽰样式表是否被禁⽤的布尔值。这个属性是可读/写的，将这个值设置为 true 可以禁⽤样式表。
href：如果样式表是通过<link>包含的，则是样式表的 URL；否则，是 null。
media：当前样式表⽀持的所有媒体类型的集合。与所有 DOM 集合⼀样，这个集合也有⼀个 length 属性和⼀个 item()⽅法。也可以使⽤⽅括号语法取得集合中特定的项。如果集合是空 列表，表⽰样式表适⽤于所有媒体。在 IE 中，media 是⼀个反映<link>和<style>元素media 特性值的字符串。
ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在 HTML 中通过<link>或 <style/>引⼊的（在 XML 中可能是通过处理指令引⼊的）。如果当前样式表是其他样式表通过 @import 导⼊的，则这个属性值为 null。IE 不⽀持这个属性。
parentStyleSheet：在当前样式表是通过@import 导⼊的情况下，这个属性是⼀个指向导⼊它的样式表的指针。
title：ownerNode 中 title 属性的值。
type：表⽰样式表类型的字符串。对 CSS 样式表⽽⾔，这个字符串是"type/css"。
除 了 disabled 属性之外，其他属性都是只读的。在⽀持以上所有这些属性的基础上，
CSSStyleSheet 类型还⽀持下列属性和⽅法：
cssRules：样式表中包含的样式规则的集合。IE 不⽀持这个属性，但有⼀个类似的 rules 属性。
ownerRule：如果样式表是通过@import 导⼊的，这个属性就是⼀个指针，指向表⽰导⼊的规 则；否则，值为 null。IE 不⽀持这个属性。
deleteRule(index)：删除 cssRules 集合中指定位置的规则。IE 不⽀持这个⽅法，但⽀持
⼀个类似的 removeRule()⽅法。
insertRule(rule,index)：向 cssRules 集合中指定的位置插⼊ rule 字符串。IE 不⽀持这
个⽅法，但⽀持⼀个类似的 addRule()⽅法。
应⽤于⽂档的所有样式表是通过 document.styleSheets 集合来表⽰的。通过这个集合的 length属性可以获知⽂档中样式表的数量，⽽通过⽅括号语法或 item()⽅法可以访问每⼀个样式表。来看⼀个例⼦。
var sheet = null;
for (var i=0, len=document.styleSheets.length; i < len; i++){
sheet = document.styleSheets[i];
alert(sheet.href);
}
以上代码可以输出⽂档中使⽤的每⼀个样式表的 href 属性（<style>元素包含的样式表没有
href 属性）。
不同浏览器的 document.styleSheets 返回的样式表也不同。所有浏览器都会包含<style>元素和 rel 特性被设置为"stylesheet"的<link>元素引⼊的样式表。IE 和 Opera 也包含 rel 特性被设置 为"alternate stylesheet"的<link>元素引⼊的样式表。
也可以直接通过<link>或<style>元素取得 CSSStyleSheet 对象。DOM 规定了⼀个包含 CSSStyleSheet 对象的属性，名叫 sheet；除了IE，其他浏览器都⽀持这个属性。IE ⽀持的是styleSheet 属性。要想在不同浏览器中都能取得样式表对象，可以使⽤下列代码。
function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第⼀个<link/>元素引⼊的样式表
var link = ElementsByTagName("link")[0];
var sheet = getStylesheet(link);
这⾥的 getStyleSheet()返回的样式表对象与 document.styleSheets 集合中的样式表对象相同。
1. CSS 规则
CSSRule 对象表⽰样式表中的每⼀条规则。实际上，CSSRule 是⼀个供其他多种类型继承的基类型，其中最常见的就是 CSSStyleRule 类型，表⽰样式信息（其他规则还有@import、@font-face、 @page 和@charset，但这些规则很少有必要通过脚本来访问）。CSSStyleRule 对象包含下列属性。
cssText：返回整条规则对应的⽂本。由于浏览器对样式表的内部处理⽅式不同，返回的⽂本可能会与样式表中实际的⽂本不⼀样；Safari 始终都会将⽂本转换成全部⼩写。IE 不⽀持这个属性。
parentRule：如果当前规则是导⼊的规则，这个属性引⽤的就是导⼊规则；否则，这个值为null。IE 不⽀持这个属性。
parentStyleSheet：当前规则所属的样式表。IE 不⽀持这个属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。