JS-高级 DOM 技术

转至http://blog.sina.com.cn/s/blog_5f54f0be0100lhdz.html

1)样式编程;

在JS中改变元素的样式;主要是通过元素的:style 属性来完成;obj.style 可以获得在HTML中声明的:

<div style="font-weight:bold">abc</div>  代码中 style 属性里的内容;但我们无法获得在<style></style>标签或外部CSS文件中定义的该对象的属性;

但我们可以通过更改 style 属性的值来改变对象的样式;格式为:obj.style.xxx = "";

xxx 为样式特性;如:

obj.style.color = "red";

obj.style.fontWeight = "bold";

obj.style.backgroundColor = "#000000";

obj.style.border = "1px solid red";

从上面可以看出,在CSS中用单个单词表示的特性,如:color border.等,在JS设置style时还是用该单词.但在CSS中通过 - 表示的特性,如:background-color,font-weight等,在JS中则需要将 - 取消,并将后面的单词的首字母大写.

2)DOM样式;

另一种方法更改 style 中的属性:

obj.getPropertyValue(propertyName);返回CSS特性,参数为想要返回的特性名,这里的特性名是在CSS中定义的名称,不同于上面说的将 - 取消 ,然后将后面单词首字母大写,应该直接是:background-color这样;

如:<div style="color:#000000" id="box">aaa</div>;

alert(document.getElementByIdx_x_x("box").style.getPropertyValue("color")); // rgb(0,0,0)

item(index):返回给定索引处的特性名,如:color;用法:obj.style.item(index);

setProperty(propertyName,value,priority);设置属性,并设置是否为important,用法:obj.style.setProperty("color","red","")

removeProperty(propertyName);删除属性;

上面的方法IE不支持 -- 所有版本;

3)访问样式表;

前面说了我们无法通过对象的style属性获得外部CSS或<style />标签内定义的特性.但我们可以通过另一种方法获得:

document.styleSheets : 返回HTML页面中所有样式表的引用,包括 <style />元素(JS认为它是全功能的样式表);它是一个列表;里面就是CSS对象;它有几个属性:

disabled : 样式表是否被禁用;

href : 外部CSS文件的路径,对于<style/>元素,应该是 null,但Mozilla 返回的当前HTML页面的URL;

ownerNode : 指定样式表的DOM节点(<link />或<style/>)元素.IE不支持此属性;

parentStyleSheet : 如果样式表是通过CSS的@import加载进来的,则它返回导入它的那个样式表;

title : <link /> 或 <style />标签上的"title"属性;

type : 样式表的 mime 类型;对于CSS通常是:text/css;

4)最终样式:

除了style属性和CSS语句外,元素还有它的最终样式.也就是所有从style属性到CSS规则计算得到的样式信息组成,用来告诉我们元素最后如何显示在屏幕上的.IE 和 DOM各自的实现上存在不同.

IE:

obj.currentStyle ;它包含了所有元素的 style 对象的牲和任何未被覆盖的CSS规则的特性;它的使用方式和 style 的完全一样;特性和方法都一样;所以,如果元素的样式综合后应用到元素上的样式是属于CSS文件中的,那么,通过currentStyle得到的样式就是CSS文件中的样式;这在一定程度上破解了JS不能访问CSS文件中样式的说法.如:

页面上:

<style>.temp{background:#eeeeee;}</style>

<div class="temp" id="tempId">aaa</div>

CSS文件中:

#tempId{background:#000000;}

因为ID的优先级比类名高,所以最终会将CSS文件中对ID设置的属性给div元素,而覆盖掉在style标签中的定义;这时候通过:document.getElementByIdx_x_x("tempId").currentStyle.background获得到的就是CSS文件中定义的颜色

DOM:

document.defaultView.getComputedStyle();它根据给定的元素创建类似style的对象,这个方法接受两个参数:需要获取样式的元素和:hover,first-letter之类的伪元素(如果不需要可以为null).

如: document.defaultView.getComputedStyle(oDiv,null).backgroundColor;

5)innerHTML innerText outerText outerHTML

innerHTML : obj.innerHTML = "<div>aaa</div>";将HTML代码放入元素下级,且作为HTML解析,也就是说里面的一些标签会被正确的解析,如: ul会被解析成列表,a会被解析成链接;

innerText : obj.innerText = "<a href=''>ddd</a>";将文本放入元素下级,但它会过滤掉标签,这里只会有ddd

outerText:  和outerText一样,但它赋内容的时候会将自己本身也覆盖掉;

outerHTMl: 同上;

只有IE和Opera才支持outerText和outerHTMl