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