码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript学习9:DOM操作表格及样式

时间:2015-05-31 21:44:03      阅读:175      评论:0      收藏:0      [点我收藏+]

标签: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学习9:DOM操作表格及样式

标签:javascript   dom   

原文地址:http://blog.csdn.net/lianjiangwei/article/details/46292015

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!