不论什么支持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 会返回值。

全栈JavaScript之路( 二十五 )訪问元素的样式的更多相关文章

  1. 全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

    在须要给文档插入大量的html 标记下.通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来. 利用html 标签 插入技术,能够直接插入html代码字符串,简单.高 ...

  2. 全栈JavaScript之路(十八)HTML5 自己定义数据属性

    HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名能够任意加入,仅仅要带上前缀 data- 开头 ...

  3. 全栈JavaScript之路(十四)HTML5 中与class属性相关的扩充

    1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 O ...

  4. 全栈JavaScript之路(十六)HTML5 HTMLDocument 类型的变化

    HTML5 扩展了 HTMLDocument, 添加了新的功能. 1.document.readState = 'loading' || 'complete'  //支持readyState 属性的浏 ...

  5. 全栈JavaScript之路(十)学习 DocumentFragment 类型 节点

    DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象.能够包括其他类型节点,并有能力訪问.操作当中的节点,可是在文档中没有文档标记,相当于是一个页面不可见的容器. ...

  6. “全栈2019”Java多线程第二十五章:生产者与消费者线程详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  7. “全栈2019”Java多线程第十五章:当后台线程遇到finally

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  8. “全栈2019”Java异常第十五章:异常链详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  9. “全栈2019”Java第八十五章:实现接口中的嵌套接口

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. “全栈2019”Java第七十五章:内部类持有外部类对象

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

随机推荐

  1. 【agc014d】Black and White Tree

    又是被虐的一天呢~(AC是不可能的,这辈子不可能AC的.做题又不会做,就是打打暴力,才能维持骗骗分这样子.在机房里的感觉比回家的感觉好多了!里面个个都是大佬,个个都是死宅,我超喜欢在里面的!) (↑以 ...

  2. 关于Webpack详述系列文章 (第二篇)

    1.缩小文件搜索范围 1.1.1 include & exclude module:{ rules:[ { test:/\.js$/, use:['babel-loader?cacheDire ...

  3. C#中选中指定文件并读取类似ini文件的内容

    一.背景 由于项目中需要去读取设备的配置信息,配置文件的内容和INI配置文件的格式类似,所以可以按照INI文件的方式来处理.涉及如何打开一个文件,获取打开的文件的路径问题,并读取选中的文件里边的内容. ...

  4. jsp中标签id和name的区别(转)

    name原来是为了标识之用,但是现在根据规范,都建议用id来标识元素. 但是name在以下用途是不能替代的:1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多na ...

  5. 洛谷 P1104 生日

    P1104 生日 题目描述 cjf君想调查学校OI组每个同学的生日,并按照从大到小的顺序排序.但cjf君最近作业很多,没有时间,所以请你帮她排序. 输入输出格式 输入格式: 有2行, 第1行为OI组总 ...

  6. 初识ThreadLocal

    近期公司在进行Java开发者的招聘活动,当中有一道面试题是这种:"请简单描写叙述一下ThreadLocal类的作用." 结果发现有非常多的面试者没有听说过ThreadLocal或者 ...

  7. Android学习笔记之Bitmap位图虽触摸点移动

    package xiaosi.bitmap; import android.app.Activity; import android.os.Bundle; public class mianActiv ...

  8. swiper轮播控件配置项

    var mySwiper = new Swiper ('.swiper-container', {    direction: 'horizontal',    loop: true,    auto ...

  9. [selenium]选取下拉框内容的方法

    说明:本文章主要是对select元素操作的讲解,非select元素的下拉框需要另外分析 1.select元素示例: 2.select下拉框选取的3种方法 WebElement selector = d ...

  10. django-rest-framework框架 第三篇 之CRUD视图扩展类(增删改查的优化)

    CRUD视图扩展类 1 CreateModelMixin 2 RetrieveModelMixin 3 UpdateModelMixin 4 DestroyModelMixin <1> 创 ...