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

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

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

也有例外, float 是javascript 关键字,不能直接转换,在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之路( 二十五 )访问元素的样式

时间: 2024-08-07 08:39:39

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

全栈JavaScript之路(十五)HTML5 focus 扩展 (焦点扩展)

HTML5 添加了辅助管理 focus 的功能,  文档获得焦点的途径有; 页面加载,用户输入(一般是按tab键),和 在代码中调用focus()函数. HTML5新增的辅助管理焦点的属性与方法有: document.activeElement 属性, 这个属性指向获得焦点的元素,文档加载期间 值为null, 文档加载完成,保存得是  document.body 的引用. document.hasFocus()方法, 确定文档是否获得了焦点. 查询文档获知哪个元素获得了焦点,以及确定文档是否获得

全栈JavaScript之路(十二)了解 Selector API

2008 年之前,浏览器中几乎所有的DOM扩展都是专有的.此后,W3C 着手将一些已经成为事实标准的专有扩展标准化并写入规范当中. Selector API  level 1  的核心是两个方法: querySelector(), querySelectorAll() .在兼容浏览器中可以通过Docuemnt 类型节点,或者Element类型节点调用. 目前已完全支持Selectors API Level 1的浏览器有IE 8+.Firefox 3.5+.Safari 3.1+.Chrome 和

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

在需要给文档插入大量的html 标记下,通过DOM操作很麻烦,你不仅要创建一系列的节点,而且还要小心地按照顺序把它们接结起来. 利用html 标签 插入技术,可以直接插入html代码字符串,简单.高效! 以下插入html标签相关的扩展已经纳入html5 规范. 1.innerHTML 属性 2.outerHTML 属性 3.insertAdjacentHTML 方法 innerHTML 属性 有两种模式,写模式与读模式. 在读模式下,返回的是html 代码字符串. 例如: <div id="

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

HTML5 扩展了 HTMLDocument, 增加了新的功能. 1.document.readState = 'loading' || 'complete'  //支持readyState 属性的浏览器有IE4+.Firefox 3.6+.Safari.Chrome 和Opera 9+. 2.document.compatMode = 'CSS1Compat' || 'BackCompat' //实现这个属性的浏览器有ie6,Firefox.Safari 3.1+.Opera 和Chrome.

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

DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象,可以包含其它类型节点,并有能力访问.操作其中的节点,但是在文档中没有文档标记,相当于是一个页面不可见的容器.其构造函数为,function DocumentFragment() {[native code]}. DocumentFragment 类型节点的特征; nodeType:11 nodeName:#document-fragment nodeValue:null prasentNode:null

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

HTML5 规范规定,用户可以为元素 自定义非标准属性, 但是要添加 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名可以随意添加,只要带上前缀 data- 开头就可以. <div id="myid" data-appid="1" data-appname="csdn"></div> 添加属性这后可以通过 dataset 访问自定义属性,dataset 属性 是DOMStringMap  

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

1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 Opera 9.5+. 2. classList 属性 :  classList 属性是新集合类型 DOMTokenList  的实例.DOMTokenList 类型有一个lenght 属性 ,表示包含了多少子元素,要取得每一个元素可以通过item() 方法访问,也可以用 [ ] 方法 访问. 此外这

全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展

(一)DocumentType 类型的变化新增三个属性: publicId,systemId,internalSubset(内部子集) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [<!ELEMENT name (#PCDATA)>] > 通过, document.doc

全栈JavaScript之路( 二十 )HTML5 插入 html标记 ( 二 )insertAdjacentHTML

insertAdjacentHTML(),  这个方法也是在IE中最早出现的,现在已纳入html5规范,它接受两个参数,一个是下列的标记之一,一个是要写入的 html 代码文本. beforebegin , (英文为开始之前的意思)在当前元素之前插入一个新的紧邻的同辈元素 afterbegin,(英文为开始之后的意思)在当前元素之下插入一个子元素,或者是在当前元素的第一个子元素之前插入一个新的子元素. beforeend,(英文为结束之前的意思)在当前元素之后插入一个新的子元素,或者在当前元素最