首頁 >web前端 >js教程 >JavaScript DOM操作表格及樣式_基礎知識

JavaScript DOM操作表格及樣式_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原創
2016-05-16 16:04:201076瀏覽

一 操作表

標籤是HTML中結構最為複雜的一個,我們可以透過DOM來建立產生它,或HTMLDOM來操作它;
// 使用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 保存

元素的HTMLCollection集合;
tFoot 保存著對元素的引用;
tHead 保存著對元素的引用;
rows 保存對元素的HTMLCollection集合;
createTHead() 建立元素,並回傳引用;
createTFoot() 建立元素,並回傳引用;
createCpation() 建立元素;
deleteTFoot() 刪除元素;
deleteCaption() 刪除元素新增的屬性和方法
rows 保存元素中行的HTMLCollection;
deleteRow(pos) 刪除指定位置的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

元素所新增的屬性與方法
cells 保存著元素中儲存格的HTMLCollectioin集合;
deleteCell(pos) 刪除指定位置的儲存格;
insertCell(pos) 向cells集合的指定位置插入一個儲存格,並傳回參考;

// HTMLDOM取得表格的

是唯一的,只能有一個;
// 而不是唯一的,可以是多個,這樣導致最後回傳的和是元素引用;而是元素集合;

二 操作樣式

 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;                                 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样式,对于另外两种形式内联c9ccee2e6ea535a969eb3f532ad9fe89和链接2cdf5bf648cf2f33323966d7f58a7f3f方法则无法获取到;

(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类型可以通过2cdf5bf648cf2f33323966d7f58a7f3f元素和c9ccee2e6ea535a969eb3f532ad9fe89元素包含的样式表;
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 如果是通过2cdf5bf648cf2f33323966d7f58a7f3f包含的,则样式表为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,可讀可寫;

元素的引用;
tBodies 保存
元素,並回傳引用;
deleteTHead() 刪除
元素;
deleteRow(pos) 刪除指定的行;
insertRow(pos) 向rows集合中的指定位置插入一行;


alert(table.caption.innerHTML); // 取得caption的內容;

// PS:在一個表格中

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn