计算样式
引用
the rules of all stylesheets are tested to see which apply to the element, and the styles of those applicable rules are combined with any inline styles for the element. This aggregate style information can then be used to correctly render the element in the browser window.
getComputedStyle()
The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as ":before" or ":after" whose style is desired.
in the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted.
The return value of getComputedStyle() is a CSS2Properties object that represents all the styles that apply to the specified element or pseudoelement.
the object returned by getComputedStyle() is read-only.
IE does not support the getComputedStyle() method but provides a simpler alternative: every HTML element has a currentStyle property that holds its computed style.
getComputedStyle()
The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as ":before" or ":after" whose style is desired.
in the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted.
The return value of getComputedStyle() is a CSS2Properties object that represents all the styles that apply to the specified element or pseudoelement.
the object returned by getComputedStyle() is read-only.
IE does not support the getComputedStyle() method but provides a simpler alternative: every HTML element has a currentStyle property that holds its computed style.
引入的样式表和内联的样式表的综合效果才是渲染文档的最总依据。
getComputedStyle() 方法就是得到这个最总效果的计算样式的方法。
第一个参数是元素节点，第二个是css的伪类，例如":before"或":after"之类。在FF下，第二个参数不可以省略，就算你不需要写伪类，你也要传递一个null
该方法的返回值是CSS2Properties对象，它代表了当前请求元素的所有生效的样式。
IE不支持这个方法，但是每个元素都有一个currentStyle属性，它保存了当前元素的所有CSS属性。
以下是一个简单的例子：
var p = document.getElementsByTagName("p")[0]; // Get first paragraph of doc
var typeface = ""; // We want its typeface
if (p.currentStyle) // Try simple IE API first
typeface = p.currentStyle.fontFamily;
else if (window.getComputedStyle) // Otherwise use W3C API
typeface = window.getComputedStyle(p, null).fontFamily;
但你不要奢望这个方法能得到一些很有用的东西，
当你用这个查询top方法，经常是得到auto，除非你明确指定了top的数值；而在查询fontFamily时，你得到的是CSS的字体列表，而不是当前正在使用的字体……
Scripting CSS Classes
CSS的Class编程
经常要改动Class的值，自然会有一些工具函数。会比直接修改className的效率高：
这个函数可以看到老外写代码是多么严谨~
/**
* CSSClass.js: utilities for manipulating the CSS class of an HTML element.
*
* This module defines a single global symbol named CSSClass. This object
* contains utility functions for working with the class attribute (className
* property) of HTML elements. All functions take two arguments: the element
* e being tested or manipulated and the CSS class c that is to be tested,
* added, or removed. If element e is a string, it is taken as an element
* id and passed to document.getElementById().
*/
var CSSClass = {}; // Create our namespace object
// Return true if element e is a member of the class c; false otherwise
CSSClass.is = function(e, c) {
if (typeof e == "string") e = document.getElementById(e); // element id
// Before doing a regexp search, optimize for a couple of common cases.
var classes = e.className;
if (!classes) return false; // Not a member of any classes
if (classes == c) return true; // Member of just this one class
// Otherwise, use a regular expression to search for c as a word by itself
// \b in a regular expression requires a match at a word boundary.
return e.className.search("\\b" + c + "\\b") != -1;
};
// Add class c to the className of element e if it is not already there.
CSSClass.add = function(e, c) {
if (typeof e == "string") e = document.getElementById(e); // element id
if (CSSClass.is(e, c)) return; // If already a member, do nothing
if (e.className) c = " " + c; // Whitespace separator, if needed
e.className += c; // Append the new class to the end
};
// Remove all occurrences (if any) of class c from the className of element e
CSSClass.remove = function(e, c) {
if (typeof e == "string") e = document.getElementById(e); // element id
// Search the className for all occurrences of c and replace with "".
// \s* matches any number of whitespace characters.
// "g" makes the regular expression match any number of occurrences
e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), "");
};
Scripting Stylesheets
操作样式表
引用
The HTML DOM Level 2 standard defines a disabled property for both and