DOM操作CSS

标签：

1、样式表的操作

--->var cssRules = document.styleSheets[0].cssRules ||

document.styleSheets[0].rules;
----E浏览器(rules)，而遵循DOM规范的浏览器是使用的cssRules。

2、获取最终样式

--->IE浏览器

    为多有的DOM对象提供一个currentStyle对象，该对象包含了

从元素背景色到任何相关CSS规则的style对象的所有属性，通过它我们

可以获取某个元素的最终样式。

例：
    var divEle = document.getElementById("divId");

    var backgroundColor =

divEle.currentStyle.backgroundColor;

    注：属性是只读的，即不能修改只能读出来

---->在遵守DOM规范的浏览器下获取最终样式

    getComputedStyle()---一个是要获取样式的元素
              ----一个是伪元素

例：
    var divEle = document.getElementById("divId");
    var backgroundColor =

document.defaultView.getComputedStyle(divEle,

null).backgroundColor;
    //当然也可以这样写
    //window.getComputedStyle(divEle, null);//显然这样

更方便，因为window可以不写

--->最终样式兼容性处理

3、DOM事件

    --》默认事件
    
    1、a标签点击事件

    <a href="https://www.baidu.com">百度</a>
    
    2、表单提交事件

    <form action="https://www.baidu.com">

        <input type="submit" value="submit" />

    </form>

4、注册事件监听器

    1、通过HTML标签属性注册

    有html代码如下：

    <button onclick="execute()">click</button>

    js代码如下：

    function execute() {

    console.info("执行js代码");

    }

    2、通过DOM属性注册

    有html代码如下：

    <button id="btn">click</button>

    js代码如下：

    var btnEle = document.getElementById("btn");

    btnEle.onclick = function() {

    console.info("执行js代码");

    }
    ----通过dom的onclick属性来注册事件监听器，

5、事件捕获、冒泡

    事件捕获先发生，两者可遍历dom中所有的对象，起点和结束

点都是document对象。

6、兼容性问题

    var 0div = document.getElementById("div1");

    if(document.adddEventListener){

    0div.adddEventListener("click",fnclick1,true)

    }else if(document.attachEcent){

    0div.attachEcent("onclick",fnclick1)

7、Event对象
    
    Event=Event ||window.Event

    1、属性和方法

    ie                   dom
     
     srcElement              target
    screenx                  screenx
     keycode                  keycode
     cancelbubble            stopropagation
     returnvalue             preventdefault

8、事件

    1、鼠标

    mousedown--mouseup
    mousedout--mouseover--mousemove
    
    2、键盘

    keydown
    keypress
    keyup
    
    3、html事件
    
    load
    change
    scroll
    focus
    blur

DOM操作CSS

标签：

原文地址：http://www.cnblogs.com/paul-du/p/5414801.html