码迷,mamicode.com
首页 > Web开发 > 详细

DOM操作CSS

时间:2016-04-20 23:26:28      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!