DOM2和DOM3

文章目录

1. 1. 样式
   1. 1.1. DOM 样式属性和方法
   2. 1.2. 操作样式表
      1. 1.2.1. CSS 规则
      2. 1.2.2. 删除规则
   3. 1.3. 元素大小
      1. 1.3.1. 客户区大小

样式

DOM 样式属性和方法

取得 CSS 属性名和值

var prop, value, i, len;
for (i=0, len=myDiv.style.length; i < len; i++) {
    prop = myDiv.style[i];    //或者 myDiv.style.item(i)
    value = myDiv.style.getPropertyValue(prop);
    alert(prop + ":" + value);
}

操作样式表

跨浏览器取得样式表对象

function getStyleSheet(element) {
    return element.sheet || element.styleSheet;
}

//取得第一个<link/>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStyleSheet(link);

CSS 规则

跨浏览器向样式表中添加规则

function insertRule(sheet, selectorText, cssText, position) {
    if (sheet.insertRule) {
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
    } else if (sheet.addRule) {  //兼容 IE
        sheet.addRule(selectorText, cssText, position);
    }
}

insertRule(document.styleSheets[0], "body", "background-color:silver", 0);

删除规则

跨浏览器删除规则

function deleteRule(sheet, index) {
    if (sheet.deleteRule) {
        sheet.deleteRule(index);
    } else if (sheet.removeRule) {
        sheet.removeRule(index);   //兼容 IE
    }
}

deleteRule(document.styleSheet[0], 0);

与添加规则相似，删除规则也不是实际 Web 开发中常见的做法。 考虑到删除规则可能会影响 CSS 层叠的效果，因此要慎重使用

元素大小

客户区大小

确定浏览器视口大小

function getViewport() {
    if (document.compatMode == "BackCompat") {
        return {
            width: document.body.clientWidth,  // IE
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}