一 操作表格

// <table>標簽是HTML中結構最為復雜的一個,我們可以通過DOM來創建生成它,或者HTMLDOM來操作它;

1 // 使用DOM來創建表格; 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 // 表格較為復雜,層次也多,使用之前的DOM來獲取某個元素會比較麻煩;推薦使用HTMLDOM; 2 HTMLDOM 屬性和方法介紹 3 屬性或方法 說明 4 caption 保存著<caption>元素的引用; 5 tBodies 保存著<tbody>元素的HTMLCollection集合; 6 tFoot 保存著對<tfoot>元素的引用; 7 tHead 保存著對<thead>元素的引用; 8 rows 保存著對<tr>元素的HTMLCollection集合; 9 createTHead() 創建<thead>元素,并返回引用; 10 createTFoot() 創建<tfoot>元素,并返回引用; 11 createCpation() 創建<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的內容; 30 31 // PS:在一個表格中<thead>和<tfoot>是唯一的,只能有一個; 32 // 而<tbody>不是唯一的,可以是多個,這樣導致最后返回的<thead>和<tfoot>是元素引用;而<tbody>是元素集合;

二 操作樣式

1 // CSS作為(X)HTML的輔助,可以增強頁面的顯示效果,但不是每個瀏覽器都能支持最新的CSS能力; 2 // CSS的能力和DOM級別密切相關,所以需要檢測當前瀏覽器的支持CSS能力的級別; 3 // 在HTML中定義樣式的方式有3種: 4 // (1).使用style特性定義針對特定元素的樣式; 5 // (2).使用<style/>元素定義嵌入式樣式; 6 // (3).通過<link/>元素包含外部樣式表文件; 1 // DOM1級實現了最基本的文檔處理,DOM2和DOM3在這個基礎上增加了更多的交互能力; 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元素標簽都會有一個通用的屬性:style,它會返回CSSStyleDeclaration對象; 3 CSS屬性及JavaScript調用 4 CSS屬性 JavaScript調用 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級樣式規范為style對象定義屬性和方法 17 屬性或方法 說明 18 cssText 訪問或設置style中的CSS代碼; 19 box.style.cssText; // 獲取CSS代碼; 20 // PS:style屬性僅僅只能獲取行內的CSS樣式,對于另外兩種形式內聯<style>和鏈接<link>方法則無法獲取到; 1 (2).計算后的樣式:getComputedStyle/currentStyle 2 // 雖然可以通過style來獲取單一值的CSS樣式,但對于復合值的樣式信息,就需要通過計算樣式來獲取; 3 // DOM2級樣式,window對象下提供了getComputedStyle()方法:接收兩個參數,需要計算的樣式元素,和偽類(:hover);如果沒有偽類,則null; 4 // getComputedStyle()方法返回一個CSSStyleDeclaration對象;(與style屬性的類型相同);其中包含當前元素的所有計算的樣式; 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); // 不同瀏覽器不同的結果; 10 alert(sytle.fontFamily); // 計算顯示復合的樣式值; 11 // PS:border屬性是一個綜合屬性,所以它在Chrome顯示了,Firefox為空,IE為undefined; 12 // 所以,DOM在獲取CSS的時候,最好采用完整寫法兼容性最好;比如:border-top-color;

2.操作樣式表

1 // 使用style屬性可以設置行內的CSS樣式,而通過id和class調用是最常用的方法; 2 box.className = 'red'; // 通過className關鍵字來設置樣式; 3 // 添加多個className函數: 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屬性,僅僅只能獲取和設置行內的樣式; 21 // 然后學習的getComputedStyle和currentStyle,只能獲取卻不能設置; 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 獲取和設置樣式表是否被禁用; 5 href 如果是通過<link>包含的,則樣式表為URL,否則為null; 6 media 樣式表支持的所有媒體類型的集合; 7 ownerNode 指向擁有當前樣式表的指針; 8 parentStyleSheet @import導入的情況下,得到父CSS對象; 9 title ownerNode中title屬性的值; 10 type 樣式表類型字符串; 11 cssRules 樣式表包含樣式規則的集合,IE不支持; IE為rules;12 ownerRule @import導入的情況下,指向表示導入的規則,IE不支持; 13 deleteRule(index) 刪除cssRules集合中指定位置的規則,IE不支持; 14 insertRule(rule,index) 向cssRules集合中指定位置插入rule字符串,IE不支持; 15 16 sheet.disabled; // false; 可設置為true; 17 sheet.href; // css的URL; 18 sheet.media; // MediaList,集合; 19 sheet.title; // 得到title屬性的值; 20 sheet.cssRules; // CSSRuleList,樣式表規則集合; 21 sheet.deleteRule(0); // 刪除第一個樣式規則; 22 sheet.insertRule("body {background-color:red}",0); // 在第一個位置添加一個樣式規則; 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規則,并兼容所有瀏覽器函數; 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規則,并兼容所有瀏覽器函數; 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樣式表規則集合列表; 2 // 通過CSSRules屬性(非IE)和rules屬性(IE),我們可以獲得樣式表的規則集合列表; 3 // 這樣我們就可以對每個樣式進行具體的操作了; 4 var sheet = docuemnt.styleSheets[0]; // CSSStyleSheet; 5 var rules = sheet.cssRules || sheet.rules; // CSSRuleList,樣式表的規則集合列表; 6 var rule = rules[0]; // CSSStyleRule,樣式表的第一個規則;
7 CSSRules的屬性 8 屬性 說明 9 cssText 獲取當前整體規則對應的文本,IE不支持; 10 parentRule @import導入的,返回規則或null,IE不支持; 11 parentStyleSheet 當前規則的樣式表,IE不支持; 12 selectorText 獲取當前規則的選擇符文本; 13 style 返回CSSStyleDeclaration對象,可以獲取和設置樣式; 14 type 表示規則的常量值,對于樣式規則,值為1,IE不支持; 15 16 rule.cssText; // 當前規則的樣式文本; 17 rule.selectorText; // #box;樣式的選擇符; 18 rule.style.color; // red;得到具體樣式值; 19 rule.style.backgroundColor = "green"; // 修改某一條規則的樣式信息;

三 總結

1 // DOM2級樣式模塊主要針對操作元素的樣式信息而開發的,其特性如下: 2 // (1).每個元素都有一個關聯的style對象,可以用來確定和修改行內的樣式; 3 // (2).要確定某個元素的計算樣式(包括應用給它的所有CSS規則),可以使用getComputedStyle()方法; 4 // (3).IE支持類似的方法currentStyle(); 5 // (4).可以通過document.styleSheets集合訪問樣式表;
6 // (5).樣式表規則集合列表CSSRules; 1 // 三種操作CSS的方法: 2 // 第一種style行內,可讀可寫; 3 // 第二種行內/內聯和鏈接,使用getComputedStyle或currentStyle,可讀不可寫; 4 // 第三種內聯和連接,使用cssRules或rules,可讀可寫;

?

轉載于:https://www.cnblogs.com/yizihan/p/4383739.html

總結

以上是生活随笔為你收集整理的JavaScript--DOM操作表格及样式(21)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。