JavaScript DOM操作表格及样式
一操作表格
<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它;
//使用DOM来创建表格;
vartable=document.createElement('table');
table.border=1;
table.width=300;
varcaption=document.createElement('caption');
table.appendChild(caption);
caption.appendChild(document.createTextNode('人员表'));
varthead=document.createElement('thead');
table.appendChild(thead);
vartr=document.createElement('tr');
thead.appendChild(tr);
varth1=document.createElement('th');
varth2=document.createElement('th');
tr.appendChild(th1);
th1.appendChild(document.createTextNode('姓名'));
tr.appendChild(th2);
th2.appendChild(document.createTextNode('年龄'));
document.body.appendChild(table);
//表格较为复杂,层次也多,使用之前的DOM来获取某个元素会比较麻烦;推荐使用HTMLDOM;
HTMLDOM属性和方法介绍
属性或方法说明
caption保存着<caption>元素的引用;
tBodies保存着<tbody>元素的HTMLCollection集合;
tFoot保存着对<tfoot>元素的引用;
tHead保存着对<thead>元素的引用;
rows保存着对<tr>元素的HTMLCollection集合;
createTHead()创建<thead>元素,并返回引用;
createTFoot()创建<tfoot>元素,并返回引用;
createCpation()创建<caption>元素,并返回引用;
deleteTHead()删除<thead>元素;
deleteTFoot()删除<tfoot>元素;
deleteCaption()删除<caption>元素;
deleteRow(pos)删除指定的行;
insertRow(pos)向rows集合中的指定位置插入一行;
<tbody>元素添加的属性和方法
rows保存着<tbody>元素中行的HTMLCollection;
deleteRow(pos)删除指定位置的行;
insertRow(pos)向rows集合中的指定位置插入一行;
<tr>元素添加的属性和方法
cells保存着<tr>元素中单元格的HTMLCollectioin集合;
deleteCell(pos)删除指定位置的单元格;
insertCell(pos)向cells集合的指定位置插入一个单元格,并返回引用;
//HTMLDOM获取表格的<caption>
alert(table.caption.innerHTML);//获取caption的内容;
//PS:在一个表格中<thead>和<tfoot>是唯一的,只能有一个;
//而<tbody>不是唯一的,可以是多个,这样导致最后返回的<thead>和<tfoot>是元素引用;而<tbody>是元素集合;
二操作样式
CSS作为(X)HTML的辅助,可以增强页面的显示效果,但不是每个浏览器都能支持最新的CSS能力;
CSS的能力和DOM级别密切相关,所以需要检测当前浏览器的支持CSS能力的级别;
在HTML中定义样式的方式有3种:
(1).使用style特性定义针对特定元素的样式;
(2).使用<style/>元素定义嵌入式样式;
(3).通过<link/>元素包含外部样式表文件;1//DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力;
DOM2增加了CSS编程访问方式和改变CSS样式信息;
检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力
alert('DOM1级CSS能力:'+document.implementation.hasFeature('CSS','2.0'));
alert('DOM2级CSS能力:'+document.implementation.hasFeature('CSS2','2.0'));
1.访问元素的样式
(1).style特性/对象
//任何HTML元素标签都会有一个通用的属性:style,它会返回CSSStyleDeclaration对象;
CSS属性及JavaScript调用
CSS属性 JavaScript调用
color style.color
font-size style.fontSize
float style.cssFloat(非IE)
float style.styleFloat(IE)
varbox=document.getElementById('box');
box.style; //CSSStyleDecaration;
box.style.color; //red;
box.style.fontSze; //20px;
//兼容IE的float操作;
typeofbox.style.cssFloat!='undefined'?box.style.cssFloat='right':box.style.styleFloat='right';
DOM2级样式规范为style对象定义属性和方法
属性或方法 说明
cssText 访问或设置style中的CSS代码;
box.style.cssText; //获取CSS代码;
//PS:style属性仅仅只能获取行内的CSS样式,对于另外两种形式内联<style>和链接<link>方法则无法获取到;
(2).计算后的样式:getComputedStyle/currentStyle
//虽然可以通过style来获取单一值的CSS样式,但对于复合值的样式信息,就需要通过计算样式来获取;
//DOM2级样式,window对象下提供了getComputedStyle()方法:接收两个参数,需要计算的样式元素,和伪类(:hover);如果没有伪类,则null;
//getComputedStyle()方法返回一个CSSStyleDeclaration对象;(与style属性的类型相同);其中包含当前元素的所有计算的样式;
//PS:IE不支持这个DOM2级的方法,但有个类似的属性可以使用currentStyle属性;
varbox=document.getElementById('box');
varstyle=window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
alert(style.color);//颜色在不同的浏览器会有不同rgb()格式;
alert(style.border);//不同浏览器不同的结果;
alert(sytle.fontFamily);//计算显示复合的样式值;
//PS:border属性是一个综合属性,所以它在Chrome显示了,Firefox为空,IE为undefined;
//所以,DOM在获取CSS的时候,最好采用完整写法兼容性最好;比如:border-top-color;
2.操作样式表
//使用style属性可以设置行内的CSS样式,而通过id和class调用是最常用的方法;
box.className='red';//通过className关键字来设置样式;
//添加多个className函数:
//判断是否存在这个class;
functionhasClass(element,className){
returnelement.className.match(newRegExp('(\\s|^)'+className+'(\\s|$)'));
}
//添加一个class,如果不存在的话;
functionaddClass(element,className){
if(!hasClass(element,className)){
element.className+=""+className;
}
}
//删除一个class,如果存在的话;
functionremoveClass(element,className){
if(hasClass(element,className)){
element.className=element.className.replace(newRegExp('(\\s|^)'+className+'(\\s|$)'),'');
}
}
//之前使用style属性,仅仅只能获取和设置行内的样式;
//然后学习的getComputedStyle和currentStyle,只能获取却不能设置;
(1).获得CSSStyleSheet
//CSSStyleSheet类型可以通过<link>元素和<style>元素包含的样式表;
document.implementation.hasFeature('StyleSheet','2.0');//是否支持DOM2级样式表;
document.getElementsByTagName('link')[0];//HTMLLinkElement;
document.getElementsByTagName('style')[0];//HTMLStyleElement;
//这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型;但CSSStyleSheet类型更加通用一些;
//得到这个类型非IE使用sheet属性,IE使用styleSheet;
varlink=document.getElementsByTagName('link')[0];
varsheet=link.sheet||link.styleSheet;//得到CSSStyleSheet;
(2).CSSStyleSheet对象的属性和方法
CSSStyleSheet属性或方法
属性或方法说明
disabled获取和设置样式表是否被禁用;
href如果是通过<link>包含的,则样式表为URL,否则为null;
media样式表支持的所有媒体类型的集合;
ownerNode指向拥有当前样式表的指针;
parentStyleSheet@import导入的情况下,得到父CSS对象;
titleownerNode中title属性的值;
type样式表类型字符串;
cssRules样式表包含样式规则的集合,IE不支持;IE为rules;12ownerRule@import导入的情况下,指向表示导入的规则,IE不支持;
deleteRule(index)删除cssRules集合中指定位置的规则,IE不支持;
insertRule(rule,index)向cssRules集合中指定位置插入rule字符串,IE不支持;
sheet.disabled;//false;可设置为true;
sheet.href;//css的URL;
sheet.media;//MediaList,集合;
sheet.title;//得到title属性的值;
sheet.cssRules;//CSSRuleList,样式表规则集合;
sheet.deleteRule(0);//删除第一个样式规则;
sheet.insertRule("body{background-color:red}",0);//在第一个位置添加一个样式规则;
//PS:IE中不支持的属性和方法,IE有替代版本;
sheet.rules;//代替cssRules的IE版本;
sheet.removeRule(0);//代替deleteRule的IE版本;
sheet.addRule("body","{background-color:red",0);//代替insertRule的IE版本;
//除了刚才的方法可以得到CSSStyleSheet类型,还有一种方法是通过document的styleSheets属性来获取;
document.styleSheets;//StyleSheetList,集合;
varsheet=docuemnt.styleSheets[0];//CSSStyleSheet,第一个样式表对象;
//添加CSS规则,并兼容所有浏览器函数;
varsheet=docuemnt.styleSheets[0];
insertRule(sheet,"body","background-color:red;",0);
functioninsertRule(sheet,selectorText,cssText,postion){
//如果是非IE;
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",postion);
//如果是IE
}elseif(sheet.addRule){
sheet.addRule(selectorText,cssText,postion);
}
}
(3).CSSRules样式表规则集合列表;
//通过CSSRules属性(非IE)和rules属性(IE),我们可以获得样式表的规则集合列表;
//这样我们就可以对每个样式进行具体的操作了;
varsheet=docuemnt.styleSheets[0];//CSSStyleSheet;
varrules=sheet.cssRules||sheet.rules;//CSSRuleList,样式表的规则集合列表;
varrule=rules[0];//CSSStyleRule,样式表的第一个规则;
CSSRules的属性
属性说明
cssText获取当前整体规则对应的文本,IE不支持;
parentRule@import导入的,返回规则或null,IE不支持;
parentStyleSheet当前规则的样式表,IE不支持;
selectorText获取当前规则的选择符文本;
style返回CSSStyleDeclaration对象,可以获取和设置样式;
type表示规则的常量值,对于样式规则,值为1,IE不支持;
rule.cssText;//当前规则的样式文本;
rule.selectorText;//#box;样式的选择符;
rule.style.color;//red;得到具体样式值;
rule.style.backgroundColor="green";//修改某一条规则的样式信息;
三总结
DOM2级样式模块主要针对操作元素的样式信息而开发的,其特性如下:
(1).每个元素都有一个关联的style对象,可以用来确定和修改行内的样式;
(2).要确定某个元素的计算样式(包括应用给它的所有CSS规则),可以使用getComputedStyle()方法;
(3).IE支持类似的方法currentStyle();
(4).可以通过document.styleSheets集合访问样式表;6//(5).样式表规则集合列表CSSRules;1//三种操作CSS的方法:
第一种style行内,可读可写;
第二种行内/内联和链接,使用getComputedStyle或currentStyle,可读不可写;
第三种内联和连接,使用cssRules或rules,可读可写;