• 全栈JavaScript之路( 二十五 )訪问元素的样式


    不论什么支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之相应。 这个style 对象是 CSSStyleDeclaration类型的实例,包括着html style特性的全部样式信息。但不包括 外部样式或者 内嵌样式层叠而来的样式。

      在style特性中。提定的不论什么css属性,都将表现为这个style 对象的属性。对于使用短划线的的属性名。必须转化为驼峰大写和小写形式,多数情况下都能够这样转换。

    也有例外, float 是javascript keyword,不能直接转换,在ie中 转换为 styleFloat,在其他浏览器中,转换为 cssFloat.


    假设元素没有设置style属于,哪么style会有一些默认的属性。


    1. dom2 来style对象定义了一些属性与方法


    1. cssText: 通过它能够訪问style特性中的代码
    2. length: 应用给元素的CSS属性的数量
    3. parentRule: 表示CSS信息的CSSRule 对象
    4. getPropertyValue(propertyName): 返回 指定属性的值。
    5. getPropertyCSSvalue(propertyName):返回包括 给点属性值的 CSSValue 对象。({cssValueType:'',cssText:""})
    6. getPropertyPriority(propertyName): 假设给点的属生使用了 !mportant,则返回 importtant 假设没有,则返回 空字符串。
    7. item(index),返回指定位置的CSS属性的名称
    8. removeProperty(propertyName);从样式中删除给点属性
    9. setProperty(propentyName,value,priority),将给定属性设为指定的值,并加上优先权(空字串或者 !important)


    2. 计算样式: “DOM2 级样式”增强了document.defaultView。提供了 getComputedStyle()方法。

    这种方法接受两个參数:要取得计算样式的元素和一个伪元素字符串(比如":after")。

    假设不须要伪元素信息,第二个參数能够是null。getComputedStyle()方法返回一个CSSStyleDeclaration 对象(与style 属性的类型同样)。当中包括当前元素的全部计算的样式。

    (IE 中 没有 getComputedStyle()方法,可是在IE中,每一个有style属性的元素 都有一个   currentStyle 属性, 它是CSSStyleDeclaration 类型的实例)


    边框属性可能会也可能不会返回样式表中实际的border 规则(Opera 会返回,但其它浏览器不会)。

    存在这个区别的原因是不同浏览器解释综合(rollup)属性(如border)的方式不同,

    由于设置这样的属性实际上会涉及非常多其它属性。

    在设置border 时。 实际上是设置了四个边的边框宽度、颜色、样式属性( border-left-width 、border-top-color 、border-bottom-style 。 等等)。

    因此, 即使computedStyle.border 不会在全部浏览器中都返回值,但computedStyle.borderLeftWidth 会返回值。



  • 相关阅读:
    Python解释器的安装 安装IDE工具 pycharm
    推荐一些基础知识,希望对大家了解python语言及计算机有一些帮助!
    Typora 技巧
    js 与或运算符 || && 妙用
    数据类型和Json格式
    从事前端开发必须要了解的CSS原理
    CSS浏览器兼容
    用jQuery Mobile创建Web App
    让你的网站变成响应式的3个简单步骤
    CSS BFC hasLayout模型
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/7224527.html
Copyright © 2020-2023  润新知