DOM系统学习-表格、样式和元素大小

操作表格

    属性:

        caption    标题元素

        tHead    表头元素

        tFoot    表尾元素

        tBodies    主体元素集合,通过下标取

        row    行元素集合,通过下标取

    方法:

        createCaption()

        createTHead()

        createTFoot()

        deleteCaption()

        deleteTHead()

        deleteTFoot()

        deleteRow(pos)

        insertRow(pos)

    tbody的属性和方法:

        rows    行集合

        deleteRow(pos)    删除第几行

        insertRow(pos)    插入行到那个位置

    tr的属性和方法:

        cells    单元格集合

        deleteCell(pos)    删除单元格

        insertCell(pos)    插入单元格到那个位置

    注意:

        不支持td,tbody方法


操作样式

    检查dom2级css能力:

1
document.implementation.hasFeature('CSS2','2.0');

    访问元素的样式:

        行内样式:

            调用方式

                style.color,style.fontSize,style[font-size]

            属性

                cssText    css文本内容

                length    样式个数

            方法
                getPropertyPriority(name)    含有important则返回important

                getPropertyValue(name)    获取属性值

                setProperty(name,v,p)    设置属性

                removeProperty(name)    移除属性

        获取计算后的样式:

            IE不支持getComputedStyle

            IE支持currentStyle属性

1
var style = window.getComputedStyle ? window.getComputedStyle(table,null) : null || table.currentStyle;


    操作样式表:

        基本方式

            ele.id

            ele.className

        三个定义方法

            是否存在class

1
2
3
4
//判断是否存在这个class
function hasClass(element, className) {
    return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

            添加class

1
2
3
4
5
6
//添加一个class,如果不存在的话   
function addClass(element, className) {
    if (!hasClass(element, className)) {
        element.className += " " + className;
    }
}

            删除class

1
2
3
4
5
6
//删除一个class,如果存在的话   
function removeClass(element, className) {
    if (hasClass(element, className)) {
        element.className = element.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
    }
}


        HTMLLinkElement,HTMLStyleElement

1
var link = document.getElementsByTagName('link')[0];

        sheet属性兼容

            非IE使用sheet

            IE使用styleSheet

1
var sheet = link.sheet || link.styleSheet;

        css规则

            非IE    sheet.clssRules、sheet.deleteRule()、sheet.insertRule()

            IE    sheet.rules、sheet.removeRule()、sheet.addRule()

1
2
3
4
5
6
7
8
9
function insertRule(sheet, selectorText, cssText, position) {
    //如果是非IE   
    if (sheet.insertRule) {
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
        //如果是IE   
    else if (sheet.addRule) {
        sheet.addRule(selectorText, cssText, position);
    }
}
1
2
3
4
5
6
7
8
9
function deleteRule(sheet, index) {
    //如果是非IE   
    if (sheet.deleteRule) {
        sheet.deleteRule(index);
        //如果是IE   
    else if (sheet.removeRule) {
        sheet.removeRule(index);
    }
}


获取元素

    CSS大小:

        通过style内联获取元素大小

            ele.style.width、 ele.style.height

        通过计算元素大小

1
var style = window.getComputedStyle ? window.getComputedStyle(table,null) : null || table.currentStyle;

            sytle.width、style.height

        通过CSSStyleSheet

1
2
var sheet = document.styleSheets[0]; //获取link 或style
var rule = (sheet.cssRules || sheet.rules)[0]; //获取第一条规则

            rule.style.width、rule.style.height


    实际大小:

        元素可视区大小    内容+内边距

            ele.clientWidth、ele.clientHeight

        元素滚动内容大小    滚动条

            ele.scrollWidth、ele.scrollHeight

        元素实际大小    内容+内边距+边框+滚动条

            ele.offsetWidth、ele.offsetHeight

    周边大小:

        边框大小 不支持右下

            ele.clientLeft、ele.clientTop

        相对父元素的位置

            ele.offsetLeft、ele.offsetTop

        滚动条被隐藏的大小

    ​    ​    ​ele.scrollLeft、ele.scrollTop

DOM系统学习-表格、样式和元素大小.png 

posted @ 2017-02-23 18:12  前望  阅读(304)  评论(0编辑  收藏  举报