标签:javascript dom
DOM在操作生成HTML上,还是比较简单明了的。不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了。那本文今天就来了解一下DOM如何操作表格和样式。
一 操作表格
<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它。
下面我们就使用DOM来创建一个表格:
<span style="font-size:18px;">window.onload=function(){ var table=document.createElement('table'); table.border=1; table.width=300; var caption=document.createElement('caption'); table.appendChild(caption); caption.appendChild(document.createTextNode('人员表')); var thead=document.createElement('thead'); table.appendChild(thead); var tr=document.createElement('tr'); thead.appendChild(tr); var th1=document.createElement('th'); var th2=document.createElement('th'); var th3=document.createElement('th'); tr.appendChild(th1); th1.appendChild(document.createTextNode('姓名')); tr.appendChild(th2); th2.appendChild(document.createTextNode('年龄')); tr.appendChild(th3); th3.appendChild(document.createTextNode('性别')); document.body.appendChild(table); };</span>
运行一下代码,效果如下
二 操作样式
CSS作为HTML的辅助,可以增强页面的显示效果。但不是每个浏览器都能支持最新的CSS能力。CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持的CSS能力级别。
DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要讨论CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息。
1访问元素的样式
任何HTML元素标签都会有一个通用的属性style。它会返回CSSStyleDeclaration对象。下面我们看几个最常见的行内style样式的访问方式。
虽然可以通过style来获取单一值的CSS样式,但是对于复合值的样式信息,就需要通过计算样式来获取。DOM2级样式,window对象下提供了getComputedStyle()方法。接受两个参数,需要计算的样式元素,第二个伪类(:hover),如果没有伪类,就填null。
2操作样式表
使用style属性可以设置行内的CSS样式,而通过id和class调用时最常用的方法。之前我们使用style属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,后来我们接触到了getComputedStyle和currentStyle,这只能获取却无法设置。
CSSStyleSheet类型表示通过<link>元素和<style>元素包含的样式表。
这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型,但是CSSStyleSheet类型更加通用一些,得到这个类型非IE使用sheet属性,IE使用styleSheet
var sheet=link.sheet||link.styleSheet;
还有我们可以通过CSSRules属性(非IE)和rules属性(IE),获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。
Varrules=sheet.cssRules||sheet.rules;
总结:三种操作CSS的方法,第一种style行内,可读可写;第二种行内、内联和链接,使用getComputedStyle或者currentStyle,可读不可写;第三种CSSRules或rules,内联和链接可读可写。
标签:javascript dom
原文地址:http://blog.csdn.net/lianjiangwei/article/details/46292015