JS经典实例网站首页 JS经典实例

javascript学习笔记-DOM操作表格及样式

发布时间：2018-04-05 18:06:33编辑：雪饮阅读（）

一张完整的表格格式

<style>

th,td{

text-align:center;

}

</style>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

表格属性或元素的快速获取与删除

var table=document.getElementsByTagName("table")[0];

//快速获取表的标题

//alert(table.caption.innerText);

//快速获取表的表头

//alert(table.tHead);

//快速获取表的主体

//alert(table.tBodies[0]);

//快速获取表格行数(不分标题、主体。。。。等)

//alert(table.rows.length);

//快速获取表主体的行数

//alert(table.tBodies[0].rows.length);

//快速获取某行单元格的数量

//alert(table.tBodies[0].rows[1].cells.length);

//快速删除表的标题

//table.deleteCaption();

//快速删除表格的表头

//table.deleteTHead();

//快速删除某行

//table.tBodies[0].deleteRow(0);

//快速删除某个单元格

//table.tBodies[0].rows[0].deleteCell(0);

一个表格的完整创建(部分表格元素节点的快速创建)

var table=document.createElement("table");

table.width=300;

table.border=1;

table.align='center';

//快速创建表的标题

table.createCaption().innerText="人员表";

//快速创建表的表头

var thead=table.createTHead();

//快速创建一个行

var tr=thead.insertRow(0);

//th只能用普通方法创建

var th=document.createElement("th");

th.innerText="姓名";

tr.appendChild(th);

var th=document.createElement("th");

th.innerText="性别";

tr.appendChild(th);

var th=document.createElement("th");

th.innerText="年龄";

tr.appendChild(th);

//tbody只能用普通方法创建

var tbody=document.createElement("tbody");

table.appendChild(tbody);

var tbodyTr0=table.tBodies[0].insertRow(0);

//快速创建一个单元格

tbodyTr0.insertCell(0).innerText="杜敏捷";

tbodyTr0.insertCell(1).innerText="女";

tbodyTr0.insertCell(2).innerText=28;

var tbodyTr1=table.tBodies[0].insertRow(1);

tbodyTr1.insertCell(0).innerText="雪饮";

tbodyTr1.insertCell(1).innerText="男";

tbodyTr1.insertCell(2).innerText=24;

//快速tfoot

var tfoot=table.createTFoot();

var tfootTd=tfoot.insertRow(0).insertCell(0);

console.log(tfootTd);

tfootTd.colSpan=3;

tfootTd.innerText="合计:xxxx人";

document.body.appendChild(table);

检测浏览器是否支持 DOM1 级 CSS 能力或 DOM2 级 CSS 能力

//检测浏览器是否支持dom1级css

alert(document.implementation.hasFeature('CSS','2.0'));

//检测浏览器是否支持dom2级css

alert(document.implementation.hasFeature('CSS2','2.0'));

//上面两个ie均返回false,而这个则返回true

alert(document.implementation.hasFeature('HTML','1.0'));

这种检测方案在 IE 浏览器上不精确，IE6 中，hasFeature()方法只为 HTML 和版本 1.0 返回 true，其他所有功能均返回 false。但 IE 浏览器还是支持最常用的 CSS2 模块。

在火狐中css样式分为源代码样式和计算后的样式(控制台中有"计算后"选项)

<div id="box" style="color:red;background:#ccc;font-size:20px;float:right">杜敏捷雪饮</div>

行内样式的获取

<html>

<head>

<title>Insert title here</title>

window.onload=function(){

var box=document.getElementById("box");

//alert(box.style.color);

//alert(box.style.fontSize);

//获取背景颜色时在ie上是源代码,在谷歌和火狐上是计算后的，而且火狐和谷歌还呈现结果不一致

//ie不支持获取浮动

//alert(box.style.float);

//这种方式获取浮动，ie也不支持

//alert(box.style.cssFloat);

//仅ie浏览器支持的获取浮动

//alert(box.style.styleFloat);

//通过或运算来兼容3大浏览器对于浮动的获取

alert(box.style.styleFloat || box.style.cssFloat);

}

</script>

</head>

<body>

<div id="box" style="color:red;background:#ccc;font-size:20px;float:right">杜敏捷雪饮</div>

</body>

</html>

对于兼容性不好的行内样式的赋值

<html>

<head>

<title>Insert title here</title>

window.onload=function(){

var box=document.getElementById("box");

box.style.styleFloat="right";

box.style.cssFloat="right";

}

</script>

</head>

<body>

<div id="box">杜敏捷雪饮</div>

</body>

</html>

dom2级提供的一些行内css属性和方法

var box=document.getElementById("box");

//查看css文本

//alert(box.style.cssText);

//查看css属性个数(ie不兼容，火狐和谷歌的结果不一致)

//alert(box.style.length);

//设置css中的属性(ie不支持)

//box.style.setProperty('color','pink');

//设置css中的属性(ie不支持)

box.style.removeProperty('color');

获取计算后的行内样式

计算后的样式不仅包含你所设置的行内样式，还包含你没有设置的一般默认的样式

计算后的样式一般包含设置的样式和默认的样式

计算后的样式不仅能获取行内样式，内联，外链的样式也都是可以的。

var box=document.getElementById("box");

//获取计算后的样式对象

//第二个参数接受一个伪类，比如你要获取a表签的hover的样式则传入参数":hover",

//若直接获取属性，则第二个参数直接设置为null

//var style=window.getComputedStyle(box,null);

//alert(style.fontSize);

//获取计算后的样式对象(仅ie支持)

//var style=box.currentStyle;

//ie字体单位竟然是pt..(只有该属性没有被设置过ie才如此表现)

//alert(style.fontSize);

//或不能乱用，这里看似为了兼容3大浏览器，但实际上或的原理是前面有值就返回前面的，否则返回后面的

//而这里前面直接报错，既不是返回值，也不是不返回值

//var style=window.getComputedStyle(box,null) || box.currentStyle;

//alert(style.fontSize);

//正确的兼容做法

var style=window.getComputedStyle ? window.getComputedStyle(box,null):box.currentStyle;

alert(style.fontSize);

获取计算后样式的一个缺陷

var box=document.getElementById("box");

var style=window.getComputedStyle ? window.getComputedStyle(box,null):box.currentStyle;

//border属性的计算后属性在ie和火狐中获取不到

//因为这种复合型属性在火狐和ie计算后都分裂成为了border-bottom-color、border-bottom-style...等了

//alert(style.border);

//所以只能单独获取复合属性的某一项子属性才更兼容

//alert(style.borderTopColor);

//当然，如果该属性在行内，那么用行内的方式来获取，就都兼容的

alert(box.style.border);

使用变量创建正则的两种方法

(1)

var str="abcd";

//变量

var bl='d';

//使用变量创建正则

var zz=eval("/"+bl+"/");

alert(str.match(zz));

(2)

var str="abcd";

//变量

var bl='c';

//使用变量创建正则

var zz=new RegExp(bl);

alert(str.match(zz));

检测是否支持 DOM2 级样式表

//ie虽然显示false，但是是支持的

alert(document.implementation.hasFeature('StyleSheets','2.0'));

获取外部样式表对象

var link=document.getElementsByTagName('link')[0];

var sheet=link.sheet;

alert(sheet);

console.log(sheet);

获取样式表对象(无论外部还是内部)

获取的是一个集合，集合中的每个元素都对应一组style的样式表标签或link样式表标签

var sheet=document.styleSheets;

alert(sheet);

console.log(sheet);

禁用样式表对象集合中某个样式表对象

var sheet=document.styleSheets;

sheet[0].disabled=true;

获取样式表对象的url

var sheet=document.styleSheets;

alert(sheet[0].href);

获取样式表支持的所有媒体类型的集合

不同浏览器获取出来的数据结构不太一样

window.onload=function(){

var sheet=document.styleSheets[0];

alert(sheet.media);

console.log(sheet.media);

}

</script>

获取样式表对象的标题

window.onload=function(){

var sheet=document.styleSheets[0];

alert(sheet.title);

}

</script>

获取样式表对象的规则集合(谷歌不支持)

某个样式表对象中的每一对花括号就是该样式表对象的规则集合中的一个元素

var sheet=document.styleSheets[0];

//谷歌浏览器不兼容

alert(sheet.cssRules);

console.log(sheet.cssRules);

获取样式表对象的规则集合(火狐不支持，谷歌服务器端支持,ie支持)

var sheet=document.styleSheets[0];

alert(sheet.rules);

获取样式表对象的规则集合中某条规则的规则文本内容(谷歌不支持)

var sheet=document.styleSheets[0];

alert(sheet.cssRules[0].cssText);

获取样式表对象的规则集合中某条规则的选择符(谷歌不支持)

所谓选择符就是规则的花括号前面的内容

var sheet=document.styleSheets[0];

alert(sheet.cssRules[0].selectorText);

删除样式表对象的规则集合中的某条规则(全兼容)

var sheet=document.styleSheets[0];

sheet.deleteRule(0);

向样式表对象的规则集合中插入一条规则(全兼容)

第一个参数是规则，第二个参数是插入的位置

var sheet=document.styleSheets[0];

sheet.insertRule('body {background-color:pink}',0);

ie独有的获取样式表对象的规则集合

var sheet=document.styleSheets[0];

alert(sheet.rules);

删除样式表对象规则集合中某条规则(谷歌不支持)

var sheet=document.styleSheets[0];

sheet.removeRule(0);

向样式表对象的规则集合中插入一条规则(火狐不支持)

var sheet=document.styleSheets[0];

sheet.addRule('body','background-color:pink;font-size:100px;');

获取样式规则中的某个样式(谷歌不支持)

var sheet=document.styleSheets[0];

var rules=sheet.cssRules;

var rule=rules[0];

alert(rule.style.color);

修改样式规则中的某个样式(谷歌不支持)

ie中在控制台中也同时修改了，而火狐中仅仅是页面呈现颜色改变，但控制台中还是没有改变

var sheet=document.styleSheets[0];

var rules=sheet.cssRules;

var rule=rules[0];

rule.style.color='blue';

总结：

三种操作 CSS 的方法，第一种 style 行内，可读可写；第二种行内、内联和链接，使用 getComputedStyle 或 currentStyle，可读不可写；第三种 cssRules 或 rules，内联和链接可读可写。

关键字词：javascript,dom,表格,样式

上一篇：javascript学习笔记-DOM进阶

下一篇：javascript学习笔记-DOM元素尺寸和位置

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript学习笔记-DOM操作表格及样式

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例