style,getComputedStyle,currentStyle,defaultView,getPropertyValue

本文深入解析CSS样式获取API getComputedStyle及其与style的区别,详细对比了两者在兼容性、获取对象范围及操作特性上的差异,并介绍了getPropertyValue和getPropertyCSSValue方法的使用与兼容性,同时探讨了在不同浏览器环境下的应用策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、getComputedStyle是什么?
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。


   1、语法如下:
    var style = getComputedStyle("元素", false);
    例如:
    var dom = document.getElementById("test"),
    style = window.getComputedStyle(dom , false);

   备注:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“是必需的,不过现在嘛,不是必需参数了。


   2、兼容性:getComputedStyle方法IE6~8是不支持的

       currentStyle属性貌似不支持伪类样式获取

       function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}

二、getComputedStyle与style的区别

我们使用element.style也可以获取元素的CSS样式声明对象,但是其与getComputedStyle方法还有有一些差异的。
只读与可写
正如上面提到的getComputedStyle方法是只读的,只能获取样式,不能设置;而element.style能读能写,能屈能伸。
获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而

element.style只能获取元素的行间样式。



三、getComputedStyle与defaultView

如果我们查看jQuery源代码,会发现,其css()方法实现不是使用的window.getComputedStyle而是document.defaultView.getComputedStyle,

getComputedStyle=document.defaultView && document.defaultView.getComputedStyle;

实际上,使用defaultView基本上是没有必要的,getComputedStyle本身就存在window对象之中。

不过有个特殊情况,在FireFox3.6上不使用defaultView方法就搞不定的,就是访问框架(frame)的样式.


四、getPropertyValue方法


getPropertyValue方法可以获取CSS样式申明对象上的属性值(直接属性名称),例如:
window.getComputedStyle(element, false).getPropertyValue("float");


如果我们不使用getPropertyValue方法,直接使用键值访问,其实也是可以的。但是,比如这里的的float,如果使用键值访问,则不能直接使用getComputedStyle(element, false).float,而应该是cssFloat与styleFloat。
使用getPropertyValue方法不必可以驼峰书写形式(不支持驼峰写法),例如:style.getPropertyValue("border-top-left-radius");


兼容性
getPropertyValue方法IE9+以及其他现代浏览器都支持,IE6-8使用getAttribute方法。


在老的IE浏览器(包括最新的),getAttribute方法提供了与getPropertyValue方法类似的功能,可以访问CSS样式对象的属性。用法与getPropertyValue类似:style.getAttribute("float");


使用getAttribute方法也不需要cssFloat与styleFloat的怪异写法与兼容性处理。不过,还是有一点差异的,就是属性名需要驼峰写法,如下:
style.getAttribute("backgroundColor");


如果不考虑IE6浏览器,貌似也是可以这么写:
style.getAttribute("background-color");


实例才是王道,您可以狠狠地点击这里:getPropertyValue和getAttribute获取背景色demo
结果FireFox下一如既往的rgb颜色返回(Chrome也是返回rgb颜色):
FireFox浏览器下一如既往的RGB颜色返回 张鑫旭-鑫空间-鑫生活
对于IE9浏览器,虽然应用的是currentStyle, 但是从结果上来讲,currentStyle返回的对象是完全支持etPropertyValue方法的。


五、getPropertyValue和getPropertyCSSValue
从长相上看getPropertyCSSValue与getPropertyValue是近亲,但实际上,getPropertyCSSValue要顽劣的多。
getPropertyCSSValue方法返回一个CSS最初值(CSSPrimitiveValue)对象(width, height, left, …)或CSS值列表(CSSValueList)对象(backgroundColor, fontSize, …),这取决于style属性值的类型。在某些特别的style属性下,其返回的是自定义对象。该自定义对象继承于CSSValue对象(就是上面所说的getComputedStyle以及currentStyle返回对象)。
getPropertyCSSValue方法兼容性不好,IE9浏览器不支持,Opera浏览器也不支持(实际支持,只是老是抛出异常)。而且,虽然FireFox中,style对象支持getPropertyCSSValue方法,但总是返回null. 因此,目前来讲,getPropertyCSSValue方法可以先不闻不问。



<think>我们正在讨论JavaScript中的两个方法:`getComputedStyle` 和 `getPropertyValue`。 首先,`getComputedStyle` 是一个可以获取元素所有最终使用的CSS属性值的方法,返回一个实时的 `CSSStyleDeclaration` 对象。 然后,`getPropertyValue` 是 `CSSStyleDeclaration` 对象的一个方法,用于获取指定的CSS属性的值。 用途: 1. `getComputedStyle` 用于获取元素计算后的样式(即最终应用的样式,包括来自任何样式表、浏览器默认样式和元素内联样式的组合)。 2. `getPropertyValue` 用于从 `CSSStyleDeclaration` 对象中获取特定CSS属性的值。 使用示例: 假设我们有一个HTML元素,我们想要获取它的背景颜色(background-color)和字体大小(font-size)。 步骤: 1. 通过JavaScript获取目标元素。 2. 使用 `window.getComputedStyle(element)` 获取该元素的计算样式对象。 3. 使用 `getPropertyValue(propertyName)` 方法,传入属性名(可以是CSS属性名的字符串形式,如'background-color')来获取该属性的值。 注意: - 属性名可以是CSS标准属性名,并且通常使用连字符分隔(kebab-case),例如:'background-color'、'font-size'。 - 返回的值是计算后的值,通常是以字符串形式表示,例如颜色可能是rgb格式。 下面是一个具体的代码示例:</think>### JavaScript `getComputedStyle` 和 `getPropertyValue` 方法详解 #### 1. **核心概念** - **`window.getComputedStyle()`** 获取元素*最终应用*的所有CSS属性值(包含浏览器默认样式、外部样式表、内联样式等叠加结果),返回一个实时的 `CSSStyleDeclaration` 对象[^1]。 **语法**: ```javascript const styleObj = window.getComputedStyle(element, [pseudoElt]); ``` - `element`: 目标DOM元素 - `pseudoElt` (可选): 伪元素,如 `::before`、`::after` - **`.getPropertyValue()`** 从 `CSSStyleDeclaration` 对象中提取*特定CSS属性*的值(需使用**标准CSS属性名**)。 **语法**: ```javascript const value = styleObj.getPropertyValue(propertyName); ``` - `propertyName`: 连字符格式的属性名(如 `font-size`,非驼峰式) #### 2. **关键区别** | 特性 | `getComputedStyle` | `getPropertyValue` | |---------------------|----------------------------------------|----------------------------------| | **作用对象** | DOM元素 | `CSSStyleDeclaration` 对象 | | **返回值类型** | 包含所有计算样式的对象 | 单个属性的字符串值 | | **属性名格式要求** | 无(生成对象后需配合`getPropertyValue`)| 必须为连字符格式(如`z-index`) | #### 3. **使用示例** ```html <div id="box" style="color: blue; opacity: 0.8;">示例文本</div> ``` ```javascript const box = document.getElementById('box'); // 获取计算样式对象 const computedStyle = window.getComputedStyle(box); // 提取特定属性值 const color = computedStyle.getPropertyValue('color'); // 返回 "rgb(0, 0, 255)" const opacity = computedStyle.getPropertyValue('opacity'); // 返回 "0.8" const fontSize = computedStyle.getPropertyValue('font-size'); // 返回 "16px"(继承默认值) console.log(color, opacity, fontSize); ``` #### 4. **典型应用场景** 1. **动态样式检测** 获取元素实际渲染尺寸(如 `width` + `padding` + `border`): ```javascript const totalWidth = computedStyle.getPropertyValue('width'); ``` 2. **伪元素样式操作** 获取 `::before` 内容: ```javascript const pseudoStyle = getComputedStyle(box, '::before'); const content = pseudoStyle.getPropertyValue('content'); // 返回 "attr(data-text)" ``` 3. **响应式布局判断** 检测媒体查询中定义的样式: ```javascript if (getComputedStyle(document.body).getPropertyValue('--breakpoint') === 'mobile') { // 移动端逻辑 } ``` #### 5. **注意事项** - **值标准化**:颜色返回 `rgb()`/`rgba()`,尺寸返回 `px`(即使原始值为 `em`)[^2]。 - **性能**:频繁调用可能引发重排(reflow),建议批量读取。 - **只读性**:返回的计算样式**不可直接修改**(需通过元素 `style` 属性更改)。 --- ### 相关问题 1. `getComputedStyle` 与 `element.style` 有何本质区别? 2. 如何用 `getComputedStyle` 检测浏览器是否支持某个CSS属性? 3. 为什么 `getPropertyValue('float')` 需要写成 `cssFloat` 作为后备方案? 4. 获取 `transform` 矩阵值时有哪些特殊处理? [^1]: 返回的 `CSSStyleDeclaration` 对象包含所有最终应用的CSS属性。 [^2]: 浏览器会自动将相对单位转换为像素等绝对单位。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值