php table表格样式,JavaScript_JavaScript DOM操作表格及样式，一操作表格 <table>标签是

JavaScript DOM操作表格及样式

一操作表格

// 使用DOM来创建表格;

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');

tr.appendChild(th1);

th1.appendChild(document.createTextNode('姓名'));

tr.appendChild(th2);

th2.appendChild(document.createTextNode('年龄'));

document.body.appendChild(table);

// 表格较为复杂,层次也多,使用之前的DOM来获取某个元素会比较麻烦;推荐使用HTMLDOM;

HTMLDOM 属性和方法介绍

属性或方法说明

caption 保存着

元素的引用;

tBodies 保存着

元素的HTMLCollection集合;

tFoot 保存着对

元素的引用;

tHead 保存着对元素的引用;

rows 保存着对

元素的HTMLCollection集合;

createTHead() 创建元素,并返回引用;

createTFoot() 创建

元素,并返回引用;

createCpation() 创建

元素,并返回引用;

deleteTHead() 删除元素;

deleteTFoot() 删除

元素;

deleteCaption() 删除

元素;

deleteRow(pos) 删除指定的行;

insertRow(pos) 向rows集合中的指定位置插入一行;

元素添加的属性和方法

rows 保存着

元素中行的HTMLCollection;

deleteRow(pos) 删除指定位置的行;

insertRow(pos) 向rows集合中的指定位置插入一行;

元素添加的属性和方法

cells 保存着

元素中单元格的HTMLCollectioin集合;

deleteCell(pos) 删除指定位置的单元格;

insertCell(pos) 向cells集合的指定位置插入一个单元格,并返回引用;

// HTMLDOM获取表格的

alert(table.caption.innerHTML); // 获取caption的内容;

// PS:在一个表格中和

是唯一的,只能有一个;

// 而

不是唯一的,可以是多个,这样导致最后返回的和是元素引用;而是元素集合;

二操作样式

CSS作为(X)HTML的辅助,可以增强页面的显示效果,但不是每个浏览器都能支持最新的CSS能力;

CSS的能力和DOM级别密切相关,所以需要检测当前浏览器的支持CSS能力的级别;

在HTML中定义样式的方式有3种:

(1).使用style特性定义针对特定元素的样式;

(2).使用元素定义嵌入式样式;

(3).通过元素包含外部样式表文件;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)

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

box.style; // CSSStyleDecaration;

box.style.color; // red;

box.style.fontSze; // 20px;

// 兼容IE的float操作;

typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

DOM2级样式规范为style对象定义属性和方法

属性或方法说明

cssText 访问或设置style中的CSS代码;

box.style.cssText; // 获取CSS代码;

// PS:style属性仅仅只能获取行内的CSS样式,对于另外两种形式内联

(2).计算后的样式:getComputedStyle/currentStyle

// 虽然可以通过style来获取单一值的CSS样式,但对于复合值的样式信息,就需要通过计算样式来获取;

// DOM2级样式,window对象下提供了getComputedStyle()方法:接收两个参数,需要计算的样式元素,和伪类(:hover);如果没有伪类,则null;

// getComputedStyle()方法返回一个CSSStyleDeclaration对象;(与style属性的类型相同);其中包含当前元素的所有计算的样式;

// PS:IE不支持这个DOM2级的方法,但有个类似的属性可以使用currentStyle属性;

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

var style = 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;

function hasClass(element,className){

return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));

}

// 添加一个class,如果不存在的话;

function addClass(element,className){

if(!hasClass(element,className)){

element.className += " "+className;

}

// 删除一个class,如果存在的话;

function removeClass(element,className){

if(hasClass(element,className)){

element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');

}

// 之前使用style属性,仅仅只能获取和设置行内的样式;

// 然后学习的getComputedStyle和currentStyle,只能获取却不能设置;

(1).获得CSSStyleSheet// CSSStyleSheet类型可以通过元素和

document.implementation.hasFeature('StyleSheet','2.0'); // 是否支持DOM2级样式表;

document.getElementsByTagName('link')[0]; // HTMLLinkElement;

document.getElementsByTagName('style')[0]; // HTMLStyleElement;

// 这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型;但CSSStyleSheet类型更加通用一些;

// 得到这个类型非IE使用sheet属性,IE使用styleSheet;

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

var sheet = link.sheet || link.styleSheet; // 得到CSSStyleSheet;

(2).CSSStyleSheet对象的属性和方法CSSStyleSheet属性或方法

属性或方法说明

disabled 获取和设置样式表是否被禁用;

href 如果是通过包含的,则样式表为URL,否则为null;

media 样式表支持的所有媒体类型的集合;

ownerNode 指向拥有当前样式表的指针;

parentStyleSheet @import导入的情况下,得到父CSS对象;

title ownerNode中title属性的值;

type 样式表类型字符串;

cssRules 样式表包含样式规则的集合,IE不支持; IE为rules;12 ownerRule @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,集合;

var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet,第一个样式表对象;

// 添加CSS规则,并兼容所有浏览器函数;

var sheet = docuemnt.styleSheets[0];

insertRule(sheet,"body","background-color:red;",0);

function insertRule(sheet,selectorText,cssText,postion){

// 如果是非IE;

if(sheet.insertRule){

sheet.insertRule(selectorText+"{"+cssText+"}",postion);

// 如果是IE

}else if(sheet.addRule){

sheet.addRule(selectorText,cssText,postion);

}

(3).CSSRules样式表规则集合列表;// 通过CSSRules属性(非IE)和rules属性(IE),我们可以获得样式表的规则集合列表;

// 这样我们就可以对每个样式进行具体的操作了;

var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet;

var rules = sheet.cssRules || sheet.rules; // CSSRuleList,样式表的规则集合列表;

var rule = 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,可读可写;相关阅读:

Android画图并保存图片的具体实现代码

在Visual Studio使用C++开发Metro应用

举例理解C语言二维数组的指针指向问题

iOS开发中Quartz2D绘图路径的使用以及条纹效果的实现

C#实现发送简单HTTP请求的方法

jQuery $.each遍历对象、数组用法实例

win7 64位系统使用百度影音播放视频没声音没画面的故障原因及解决方法

开源php中文分词系统SCWS安装和使用实例

Win8/8.1如何右键添加杀毒软件WD扫描功能

如何让浏览器支持jquery ajax load 前进、后退功能

CSS3的first-child选择器实战攻略

win8系统关机一段时间后总是自动开机的解决方法

Win7设置声音勿扰模式让影音软件自动降低音量

Egret引擎开发指南之运行项目

php table表格样式,JavaScript_JavaScript DOM操作表格及样式，一 操作表格 <table>标签是 - phpStudy...

php table表格样式,JavaScript_JavaScript DOM操作表格及样式，一操作表格 <table>标签是 - phpStudy...