zoukankan      html  css  js  c++  java
  • DOM访问元素样式和操作元素样式

    在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表)、使用<style/>元素定义嵌入式样式(嵌入式样式表)、使用style特性定义针对特定元素的样式(内联样式表)。

    要确定浏览器是否支持DOM2级定义的css的能力可以用

    document.implementation.hasFeature("css2","2.0");//支持返回true,不支持返回false

    1.访问元素样式

    任何支持style特性的html元素在javascript中都有一个对应的style属性,可以通过该style对象获得和设置内联的样式,但不能获得和设置外部样式和嵌入式样式. 在css中用“-”相连的属性都改成驼峰大小写形式。但是float不能(因为是保留字),除了在IE中是styleFloat,其他浏览器中都是cssFloat.

    var divnode=document.getElementById("mydiv");
    divnode.style.backgroundColor="pink";//将ID为mydiv的元素背景设置为红色
    divnode.style.height="100px";//设置高度

    因为内联的样式优先级高,所以设置之后会覆盖外部样式和嵌入样式中的相同css属性。

    <div id="mydiv" style="background-color:pink;height:100px;"></div>
    alert(divnode.style.backgroundColor);//“pink"
    alert(divnode.style.height);//"100px"
    alert(divnode.style.width);//""(在这里width并没有在内联样式中,所以返回空字符.)

    style对象还有下列属性和方法。

    1. cssText:访问到style特性中的css代码
    2. length:应用的css属性数量
    3. parentRule:表示css信息的CSSRule对象。
    4. getPropertyCSSValue(propertyName):范湖包含给定属性值得CSSValue对象。
    5. getPropertyPriority(propertyName):如果给定的属性使用了!important设置,则返回”important“;否则,返回空字符串。
    6. getPropertyValue(propertyName):返回给定属性的字符串值
    7. item(index):返回给定位置的css属性名称。
    8. removeProperty(propertyName):从样式中删除指定属性
    9. setProperty(propertyName,value,priority):将给定属性设置相应的值,并加上优先权标志(“important”或一个空字符串)

    虽然style对象能够提供支持style特性的任何元素的样式信息,但不包括另外两种样式表层叠来并影响当前元素的样式信息

    document.defaultView.getComputedStyle(元素,伪元素字符串);如果不需要伪元素则为null.返回的是一个CSSStyleDeclaration对象包含元素计算后的样式(含默认样式)。IE不支持

     #mydiv{ border: 2px blue solid;  }

    也可以获取到该元素的其他css属性,但返回的内容跟浏览器相关。可以测试一下。

  • 相关阅读:
    开发工具
    人脸识别
    mysql 3813:Column check constraint 'tb_course_chk_3' references other column.
    sleep()和wait()的异同
    线程通信——wait(),notify(),notifyAll()
    对王建民老师的评价&JAVA结课自我总结
    JAVA学习日报 12/19
    JAVA学习日报 12/18
    JAVA学习日报 12/17
    JAVA学习日报 12/11
  • 原文地址:https://www.cnblogs.com/bluey/p/4821273.html
Copyright © 2011-2022 走看看