DOM Scripting 学习前-一些DOM命令2

The style property

功能：

每个元素节点都具有style属性。它包含有关附加到元素的样式的信息。查询此属性不会返回一个简单的字符串；它会返回一个对象。样式信息将存储为此样式对象的属性。

语法：

element.style.property

示例：

<p id="example" style="color: grey; font-family: 'Arial',sans-serif;">
	An example of a paragraph
</p>

var para = document.getElementById("example");

typeof para.nodeName

返回string

typeof para.style

返回object

Getting styles

可以检索附加到元素上的样式

比如，要了解已应用到元素的颜色，请使用样式对象的颜色属性：

element.style.color

示例1：

alert("The color is " + para.style.color);

结果：

示例2：

<p id="example" style="color: #999999; font-family: 'Arial',sans-serif">

alert("The color is " + para.style.color);

结果：

再比如，要了解已应用到元素的字体，请使用样式对象的字体属性：

element.style.fontFamily

示例：

alert("The font family is " + para.style.fontFamily);

再比如，要了解已应用到元素的字体大小，请使用样式对象的字体大小属性：

<p id="example" style="color: grey; font-family: 'Arial',sans-serif;font-size: 1em;">

alert("The font size is " + para.style.fontSize);

<p id="example" style="color: grey; font: 12px 'Arial',sans-serif;">

alert("The font size is " + para.style.fontSize);

Setting styles

功能：

样式对象的属性是读/写的。这意味着可以使用元素的样式属性来检索信息，也可以使用它来更新信息。

语法：

element.style.property = value

示例：

window.onload = function() {
	var para = document.getElementById("example");
	para.style.color = "black";
	para.style.font = "2em 'Times',serif";
}

className

功能：

这是任何元素节点的读/写属性。可以使用类名来获取一个元素的类。

语法：

element.className			//读
element.className = value	//写

示例：

var elem = getElementsByTagName("p");
elem.className = "intro";

.intro {
	font-weight: bold;
	font-size: 1.4em; 
}

结果：

<p>This is not a true story</p>

变成了：

<p class="intro">This is not a true story</p>

addClass function

function addClass(element,value) {
	if (!element.className) {
		element.className = value;
	} else {
		newClassName = element.className;
		newClassName+= " ";
		newClassName+= value;
		element.className = newClassName;
	} 
}

示例：

var elem = getElementsByTagName("p");
addClass(elem,"intro");

JavaScript函数正在更新类名称属性，并且样式属性保持不变。这确保了表示和行为之间更好的分离。

Abstracting a function

所有的功能都工作正常，可以保留它们。但是，可以做一些小的更改，以使函数在将来更容易重用。将一些非常具体的东西转化为更一般的东西的过程被称为抽象。
示例：

function styleHeaderSiblings() {
	if (!document.getElementsByTagName) return false;
	var headers = document.getElementsByTagName("h1");
	for (var i=0; i<headers.length; i++) {
		var elem = getNextElement(headers[i].nextSibling);
		addClass(elem,"intro");
	} 
}

如果想将其转换为一个更通用的函数，可以将这些值转换为参数。调用新函数样式元素，并给它两个参数，标签tag和添加的类名theclass：

function styleElementSiblings(tag,theclass) {
	if (!document.getElementsByTagName) return false;
	var elems = document.getElementsByTagName(tag);
	for (var i=0; i<elems.length; i++) {
		var elem = getNextElement(elems[i].nextSibling);
		addClass(elem,theclass);
	} 
}
styleElementSiblings("h1","intro");

每当发现有机会抽象这样的函数时，通常是一个好主意。