html DOM操作表格及样式
生活随笔
收集整理的這篇文章主要介紹了
html DOM操作表格及样式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一 操作表格
// <table>標(biāo)簽是HTML中結(jié)構(gòu)最為復(fù)雜的一個(gè),我們可以通過(guò)DOM來(lái)創(chuàng)建生成它,或者HTMLDOM來(lái)操作它;
1 // 使用DOM來(lái)創(chuàng)建表格;
2 ? ? var table = document.createElement('table');
3 ? ? table.border = 1;
4 ? ? table.width = 300;
5?
6 ? ? var caption = document.createElement('caption');
7 ? ? table.appendChild(caption);
8 ? ? caption.appendChild(document.createTextNode('人員表'));
9?
10 ? ? var thead = document.createElement('thead');
11 ? ? table.appendChild(thead);
12?
13 ? ? var tr = document.createElement('tr');
14 ? ? thead.appendChild(tr);
15?
16 ? ? var th1 = document.createElement('th');
17 ? ? var th2 = document.createElement('th');
18?
19 ? ? tr.appendChild(th1);
20 ? ? th1.appendChild(document.createTextNode('姓名'));
21 ? ? tr.appendChild(th2);
22 ? ? th2.appendChild(document.createTextNode('年齡'));
23?
24 ? ? document.body.appendChild(table);
1 // 表格較為復(fù)雜,層次也多,使用之前的DOM來(lái)獲取某個(gè)元素會(huì)比較麻煩;推薦使用HTMLDOM;
2 ? ? ? ? HTMLDOM 屬性和方法介紹
3 屬性或方法 ? ? ? ? ? ? ? ? ? ? ? 說(shuō)明
4 caption ? ? ? ? ? ? ?保存著<caption>元素的引用;
5 tBodies ? ? ? ? ? ? ?保存著<tbody>元素的HTMLCollection集合;
6 tFoot ? ? ? ? ? ? ? ?保存著對(duì)<tfoot>元素的引用;
7 tHead ? ? ? ? ? ? ? ?保存著對(duì)<thead>元素的引用;
8 rows ? ? ? ? ? ? ? ? 保存著對(duì)<tr>元素的HTMLCollection集合;
9 createTHead() ? ? ? ?創(chuàng)建<thead>元素,并返回引用;
10 createTFoot() ? ? ? ?創(chuàng)建<tfoot>元素,并返回引用;
11 createCpation() ? ? ?創(chuàng)建<caption>元素,并返回引用;
12 deleteTHead() ? ? ? ?刪除<thead>元素;
13 deleteTFoot() ? ? ? ?刪除<tfoot>元素;
14 deleteCaption() ? ? ?刪除<caption>元素;
15 deleteRow(pos) ? ? ? 刪除指定的行;
16 insertRow(pos) ? ? ? 向rows集合中的指定位置插入一行;
17?
18 ? ? <tbody>元素添加的屬性和方法
19 rows ? ? ? ? ? ? ? ? 保存著<tbody>元素中行的HTMLCollection;
20 deleteRow(pos) ? ? ? 刪除指定位置的行;
21 insertRow(pos) ? ? ? 向rows集合中的指定位置插入一行;
22?
23 ? ? <tr>元素添加的屬性和方法
24 cells ? ? ? ? ? ? ? ?保存著<tr>元素中單元格的HTMLCollectioin集合;
25 deleteCell(pos) ? ? ?刪除指定位置的單元格;
26 insertCell(pos) ? ? ?向cells集合的指定位置插入一個(gè)單元格,并返回引用;
27?
28 // HTMLDOM獲取表格的<caption>
29 ? ? alert(table.caption.innerHTML); ? ? ? ? ? ? ? ?// 獲取caption的內(nèi)容;
30?
31 // PS:在一個(gè)表格中<thead>和<tfoot>是唯一的,只能有一個(gè);
32 // ? 而<tbody>不是唯一的,可以是多個(gè),這樣導(dǎo)致最后返回的<thead>和<tfoot>是元素引用;而<tbody>是元素集合;
二 操作樣式
1 // CSS作為(X)HTML的輔助,可以增強(qiáng)頁(yè)面的顯示效果,但不是每個(gè)瀏覽器都能支持最新的CSS能力;
2 // CSS的能力和DOM級(jí)別密切相關(guān),所以需要檢測(cè)當(dāng)前瀏覽器的支持CSS能力的級(jí)別;
3 // 在HTML中定義樣式的方式有3種:
4 // (1).使用style特性定義針對(duì)特定元素的樣式;
5 // (2).使用<style/>元素定義嵌入式樣式;
6 // (3).通過(guò)<link/>元素包含外部樣式表文件;
1 // DOM1級(jí)實(shí)現(xiàn)了最基本的文檔處理,DOM2和DOM3在這個(gè)基礎(chǔ)上增加了更多的交互能力;
2 // DOM2增加了CSS編程訪問(wèn)方式和改變CSS樣式信息;
3 // 檢測(cè)瀏覽器是否支持DOM1級(jí)CSS能力或DOM2級(jí)CSS能力
4 ? ? alert('DOM1級(jí)CSS能力:'+document.implementation.hasFeature('CSS','2.0'));
5 ? ? alert('DOM2級(jí)CSS能力:'+document.implementation.hasFeature('CSS2','2.0'));
1.訪問(wèn)元素的樣式
1 (1).style特性/對(duì)象
2 // 任何HTML元素標(biāo)簽都會(huì)有一個(gè)通用的屬性:style,它會(huì)返回CSSStyleDeclaration對(duì)象;
3 ? ? CSS屬性及JavaScript調(diào)用
4?CSS屬性 ? ? ? ? ? ? ? ??JavaScript調(diào)用?
5 color ? ? ? ? ? ? ? ? ? style.color
6 font-size ? ? ? ? ? ? ? style.fontSize?
7 float ? ? ? ? ? ? ? ? ? style.cssFloat(非IE)
8 float ? ? ? ? ? ? ? ? ? style.styleFloat(IE)
9 ? ? var box = document.getElementById('box');
10 ? ? box.style; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// CSSStyleDecaration;
11 ? ? box.style.color; ? ? ? ? ? ? ? ? ? ? ? ?// red;
12 ? ? box.style.fontSze; ? ? ? ? ? ? ? ? ? ? ?// 20px;
13 ? ? // 兼容IE的float操作;
14 ? ? typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';
15?
16 ? ? DOM2級(jí)樣式規(guī)范為style對(duì)象定義屬性和方法
17 屬性或方法 ? ? ? ? ? ? ? ? ? ? ? 說(shuō)明
18 cssText ? ? ? ? ? ? ? ? 訪問(wèn)或設(shè)置style中的CSS代碼;
19 ? ? box.style.cssText; ? ? ? ? ? ? ? ? ? ? ?// 獲取CSS代碼;
20 ? ? // PS:style屬性僅僅只能獲取行內(nèi)的CSS樣式,對(duì)于另外兩種形式內(nèi)聯(lián)<style>和鏈接<link>方法則無(wú)法獲取到;
1 (2).計(jì)算后的樣式:getComputedStyle/currentStyle
2 // 雖然可以通過(guò)style來(lái)獲取單一值的CSS樣式,但對(duì)于復(fù)合值的樣式信息,就需要通過(guò)計(jì)算樣式來(lái)獲取;
3 // DOM2級(jí)樣式,window對(duì)象下提供了getComputedStyle()方法:接收兩個(gè)參數(shù),需要計(jì)算的樣式元素,和偽類(:hover);如果沒(méi)有偽類,則null;
4 // getComputedStyle()方法返回一個(gè)CSSStyleDeclaration對(duì)象;(與style屬性的類型相同);其中包含當(dāng)前元素的所有計(jì)算的樣式;
5 // PS:IE不支持這個(gè)DOM2級(jí)的方法,但有個(gè)類似的屬性可以使用currentStyle屬性;
6 ? ? var box = document.getElementById('box');
7 ? ? var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null ||box.currentStyle;
8 ? ? alert(style.color); ? ? ? ? ? ? ? ? ? ? // 顏色在不同的瀏覽器會(huì)有不同rgb()格式;
9 ? ? alert(style.border); ? ? ? ? ? ? ? ? ? ?// 不同瀏覽器不同的結(jié)果;
10 ? ? alert(sytle.fontFamily); ? ? ? ? ? ? ? ?// 計(jì)算顯示復(fù)合的樣式值;
11 ? ? // PS:border屬性是一個(gè)綜合屬性,所以它在Chrome顯示了,Firefox為空,IE為undefined;
12 ? ? // 所以,DOM在獲取CSS的時(shí)候,最好采用完整寫法兼容性最好;比如:border-top-color;
2.操作樣式表
1 // 使用style屬性可以設(shè)置行內(nèi)的CSS樣式,而通過(guò)id和class調(diào)用是最常用的方法;
2 ? ? box.className = 'red'; ? ? ? ? ? ? ? ? ?// 通過(guò)className關(guān)鍵字來(lái)設(shè)置樣式;
3 // 添加多個(gè)className函數(shù):
4 ? ? // 判斷是否存在這個(gè)class;
5 ? ? function hasClass(element,className){
6 ? ? ? ? return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
7 ? ? }
8 ? ? // 添加一個(gè)class,如果不存在的話;
9 ? ? function addClass(element,className){
10 ? ? ? ? if(!hasClass(element,className)){
11 ? ? ? ? ? ? element.className += " "+className;
12 ? ? ? ? }
13 ? ? }
14 ? ? // 刪除一個(gè)class,如果存在的話;
15 ? ? function removeClass(element,className){
16 ? ? ? ? if(hasClass(element,className)){
17 ? ? ? ? ? ? element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
18 ? ? ? ? }
19 ? ? }
20 // 之前使用style屬性,僅僅只能獲取和設(shè)置行內(nèi)的樣式;
21 // 然后學(xué)習(xí)的getComputedStyle和currentStyle,只能獲取卻不能設(shè)置;
1 (1).獲得CSSStyleSheet
2 // CSSStyleSheet類型可以通過(guò)<link>元素和<style>元素包含的樣式表;
3 ? ? document.implementation.hasFeature('StyleSheet','2.0'); ? ? ?// 是否支持DOM2級(jí)樣式表;
4 ? ? document.getElementsByTagName('link')[0]; ? ? ? ? ? ? ? ? ? ?// HTMLLinkElement;
5 ? ? document.getElementsByTagName('style')[0]; ? ? ? ? ? ? ? ? ? // HTMLStyleElement;
6 ? ? // 這兩個(gè)元素本身返回的是HTMLLinkElement和HTMLStyleElement類型;但CSSStyleSheet類型更加通用一些;
7 ? ? // 得到這個(gè)類型非IE使用sheet屬性,IE使用styleSheet;
8 ? ? var link = document.getElementsByTagName('link')[0];
9 ? ? var sheet = link.sheet || link.styleSheet; ? ? ? ? ? ? ? ? ? // 得到CSSStyleSheet;
1 (2).CSSStyleSheet對(duì)象的屬性和方法
2 ? ? ? ? ? ?CSSStyleSheet屬性或方法
3 屬性或方法 ? ? ? ? ? ? ? ? ? ? ? ? 說(shuō)明
4 disabled ? ? ? ? ? ? ? ? 獲取和設(shè)置樣式表是否被禁用;
5 href ? ? ? ? ? ? ? ? ? ? 如果是通過(guò)<link>包含的,則樣式表為URL,否則為null;
6 media ? ? ? ? ? ? ? ? ? ?樣式表支持的所有媒體類型的集合;
7 ownerNode ? ? ? ? ? ? ? ?指向擁有當(dāng)前樣式表的指針;
8 parentStyleSheet ? ? ? ? @import導(dǎo)入的情況下,得到父CSS對(duì)象;
9 title ? ? ? ? ? ? ? ? ? ?ownerNode中title屬性的值;
10 type ? ? ? ? ? ? ? ? ? ? 樣式表類型字符串;
11 cssRules ? ? ? ? ? ? ? ? 樣式表包含樣式規(guī)則的集合,IE不支持; ?IE為rules;12 ownerRule ? ? ? ? ? ? ? ?@import導(dǎo)入的情況下,指向表示導(dǎo)入的規(guī)則,IE不支持;
13 deleteRule(index) ? ? ? ?刪除cssRules集合中指定位置的規(guī)則,IE不支持;
14 insertRule(rule,index) ? 向cssRules集合中指定位置插入rule字符串,IE不支持;
15?
16 ? ? sheet.disabled; ? ? ? ? ? ? ? ? ? ? // false; 可設(shè)置為true;
17 ? ? sheet.href; ? ? ? ? ? ? ? ? ? ? ? ? // css的URL;
18 ? ? sheet.media; ? ? ? ? ? ? ? ? ? ? ? ?// MediaList,集合;
19 ? ? sheet.title; ? ? ? ? ? ? ? ? ? ? ? ?// 得到title屬性的值;
20 ? ? sheet.cssRules; ? ? ? ? ? ? ? ? ? ? // CSSRuleList,樣式表規(guī)則集合;
21 ? ? sheet.deleteRule(0); ? ? ? ? ? ? ? ?// 刪除第一個(gè)樣式規(guī)則;
22 ? ? sheet.insertRule("body {background-color:red}",0); ? ? ?// 在第一個(gè)位置添加一個(gè)樣式規(guī)則;
23?
24 ? ? // PS:IE中不支持的屬性和方法,IE有替代版本;
25 ? ? sheet.rules; ? ? ? ? ? ? ? ? ? ? ? ?// 代替cssRules的IE版本;
26 ? ? sheet.removeRule(0); ? ? ? ? ? ? ? ?// 代替deleteRule的IE版本;
27 ? ? sheet.addRule("body","{background-color:red",0); ? ? ? ?// 代替insertRule的IE版本;
28?
29 // 除了剛才的方法可以得到CSSStyleSheet類型,還有一種方法是通過(guò)document的styleSheets屬性來(lái)獲取;
30 ? ? document.styleSheets; ? ? ? ? ? ? ? ?// StyleSheetList,集合;
31 ? ? var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet,第一個(gè)樣式表對(duì)象;
1 // 添加CSS規(guī)則,并兼容所有瀏覽器函數(shù);
2 ? ? var sheet = docuemnt.styleSheets[0];
3 ? ? insertRule(sheet,"body","background-color:red;",0);
4 ? ? function insertRule(sheet,selectorText,cssText,postion){
5 ? ? ? ? // 如果是非IE;
6 ? ? ? ? if(sheet.insertRule){
7 ? ? ? ? ? ? sheet.insertRule(selectorText+"{"+cssText+"}",postion);
8 ? ? ? ? // 如果是IE
9 ? ? ? ? }else if(sheet.addRule){
10 ? ? ? ? ? ? sheet.addRule(selectorText,cssText,postion);
11 ? ? ? ? }
12 ? ? }
1 // 刪除CSS規(guī)則,并兼容所有瀏覽器函數(shù);
2 ? ? var sheet = document.styleSheets[0];
3 ? ? deleteRule(sheet,0);
4 ? ? function deleteRule(sheet,index){
5 ? ? ? ? // 如果是非IE;
6 ? ? ? ? if(sheet.deleteRule){
7 ? ? ? ? ? ? sheet.deleteRule(index);
8 ? ? ? ? // 如果是IE;
9 ? ? ? ? }else if(sheet.removeRule){
10 ? ? ? ? ? ? sheet.removeRule(index);
11 ? ? ? ? }
12 ? ? }
1 (3).CSSRules樣式表規(guī)則集合列表;
2 // 通過(guò)CSSRules屬性(非IE)和rules屬性(IE),我們可以獲得樣式表的規(guī)則集合列表;
3 // 這樣我們就可以對(duì)每個(gè)樣式進(jìn)行具體的操作了;
4 ? ? var sheet = docuemnt.styleSheets[0]; ? ? ? ? ? ?// CSSStyleSheet;
5 ? ? var rules = sheet.cssRules || sheet.rules; ? ? ?// CSSRuleList,樣式表的規(guī)則集合列表;
6 ? ? var rule = rules[0]; ? ? ? ? ? ? ? ? ? ? ? ? ? ?// CSSStyleRule,樣式表的第一個(gè)規(guī)則;
7 ? ? ? ? CSSRules的屬性
8 屬性 ? ? ? ? ? ? ? ? ? ? ? ? 說(shuō)明
9 cssText ? ? ? ? ? ? 獲取當(dāng)前整體規(guī)則對(duì)應(yīng)的文本,IE不支持;
10 parentRule ? ? ? ? ?@import導(dǎo)入的,返回規(guī)則或null,IE不支持;
11 parentStyleSheet ? ?當(dāng)前規(guī)則的樣式表,IE不支持;
12 selectorText ? ? ? ?獲取當(dāng)前規(guī)則的選擇符文本;
13 style ? ? ? ? ? ? ? 返回CSSStyleDeclaration對(duì)象,可以獲取和設(shè)置樣式;
14 type ? ? ? ? ? ? ? ?表示規(guī)則的常量值,對(duì)于樣式規(guī)則,值為1,IE不支持;
15 ? ??
16 ? ? rule.cssText; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 當(dāng)前規(guī)則的樣式文本;
17 ? ? rule.selectorText; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// #box;樣式的選擇符;
18 ? ? rule.style.color; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // red;得到具體樣式值;
19 ? ? rule.style.backgroundColor = "green"; ? ? ? ? ? // 修改某一條規(guī)則的樣式信息;
三 總結(jié)
1 // DOM2級(jí)樣式模塊主要針對(duì)操作元素的樣式信息而開(kāi)發(fā)的,其特性如下:
2 // (1).每個(gè)元素都有一個(gè)關(guān)聯(lián)的style對(duì)象,可以用來(lái)確定和修改行內(nèi)的樣式;
3 // (2).要確定某個(gè)元素的計(jì)算樣式(包括應(yīng)用給它的所有CSS規(guī)則),可以使用getComputedStyle()方法;
4 // (3).IE支持類似的方法currentStyle();
5 // (4).可以通過(guò)document.styleSheets集合訪問(wèn)樣式表;
6 // (5).樣式表規(guī)則集合列表CSSRules;
1 // 三種操作CSS的方法:
2 // 第一種style行內(nèi),可讀可寫;
3 // 第二種行內(nèi)/內(nèi)聯(lián)和鏈接,使用getComputedStyle或currentStyle,可讀不可寫;
4 // 第三種內(nèi)聯(lián)和連接,使用cssRules或rules,可讀可寫;
總結(jié)
以上是生活随笔為你收集整理的html DOM操作表格及样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： dom操作表格示例(dom创建表格)
- 下一篇： DOM 基本方法