都知道标准浏览器可以用 getComputedStyle 以及对应 ie 可以用 currentStyle 来取得元素渲染时的实际css属性值吧。
但是对于css缩写属性似乎很混乱，虽然标准
说缩写属性应该正确读取，
For some shorthand properties that take missing values from other sides, such as the margin, padding, and border-[width|style|color] properties, the minimum number of sides possible should be used; i.e., "0px 10px" will be returned instead of "0px 10px 0px 10px".
代码
:
但是现实是残酷的(在各个浏览器中打开)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*<![CDATA[*/
.test {
border:1px solid green;
padding:10px
}
/*]]>*/
</style>
<title>
test getComputedStyle
</title>
</head>
<body>
<div class="test" id="test">
test
</div><script type="text/javascript">
//<![CDATA[
function getStyle(el,p){
if(typeof el=='string') {
el=document.getElementById(el);
}
if (window.getComputedStyle) {
//document.defaultView
var compStyle = window.getComputedStyle (el, "");
}
else {
var compStyle = el.currentStyle;
}
return compStyle[p];
}
var el="test";
alert("padding : "+getStyle(el,"padding"));
alert("padding-top : "+getStyle(el,"paddingTop"));
alert("border : "+getStyle(el,"border"));
alert("border-width : "+getStyle(el,"borderWidth"));
//]]>
</script>
</body>
</html>
竟然opera支持最好
，关于shorthand 的不同看看这里
的总结：
Another difference is that the shorthand style properties are partially supported by the CSSStyleDeclaration and currentStyle objects. For example, the border is a shorthand style property, because the color, style and width of the border can be declared with it in one place.
The border property is supported in Opera, but not supported in Internet Explorer, Firefox and Safari.
The borderColor, borderStyle and borderWidth properties are supported in Internet Explorer and Opera, but not supported in Firefox and Safari.
The borderBottomColor, borderBottomStyle, borderBottomWidth, borderLeftColor, borderLeftStyle, borderLeftWidth, ... properties are supported in Internet Explorer, Firefox, Opera and Safari as well.
Therefore, if you need the current border settings, you must use the borderBottomColor, borderBottomStyle, borderBottomWidth, ... properties for a cross-browser solution.
单单 border 就很混乱。
可能解决：
若要达到完全兼容的话，把缩写手动拆开是个方法吧：
value("padding") =
value("
padding-top")+" "+
value("
padding-right")
+" "+
value("
padding-bottom")
+" "+
value("
padding-left")
把子项值读出来然后拼起来可行，只不过有点麻烦，需要考虑所有的缩写形式。
PS: 复杂的 IE 取得css属性的绝对像素值问题
分享到：
相关推荐
本文将详细阐述使用getComputedStyle()方法来获取CSS属性值的知识点。 首先，我们需要了解，在使用JavaScript获取CSS样式时，会遇到两个问题。第一个问题是，element.style属性只能获取到直接写在HTML标签的style...
继承属性会从父元素获取对应属性的**计算值（Computed Value）**。计算值是指经过解析后实际应用在元素上的值。如果子元素没有设置该属性或者设置了`inherit`关键字，则会使用父元素的计算值。如果子元素继续向上...
标题中的“js获取某元素的class里面的css属性值代码”指的是在JavaScript中如何获取元素基于CSS类的样式属性值。在实际开发中，我们可能需要获取某个元素根据CSS类设置的`margin`、`padding`、`height`、`border`等...
本篇文章将详细解析CSS属性在JavaScript中的对应关系，并探讨如何在JavaScript中操作这些属性。 1. **颜色属性**： - `color`：在JavaScript中，可以使用`element.style.color`来设置或获取元素的文本颜色。 - `...
在JavaScript中，获取...总之，JavaScript获取CSS属性值需要处理各种情况，包括内联样式、外部样式表以及浏览器兼容性问题。`getStyleValue`函数提供了一个基础解决方案，但更复杂的场景可能需要更高级的策略和API。
在JavaScript中，对CSS属性进行设置和获取是前端开发中常见的操作。原生JavaScript提供了DOM对象的style属性，可以用来直接操作元素的内联样式。本文将深入探讨如何使用原生JavaScript来实现CSS属性的set和get方法，...
计算值是经过所有CSS规则处理后，元素的属性值，但还未考虑视口或用户的任何限制。它是继承属性传递给后代元素的值。例如，`font-size` 在计算过程中可能需要转换为相对单位（如 em 或 rem），以便子元素可以根据父...
3. 使用回调函数动态计算 CSS 属性值 4. 使用对象语法批量设置多个样式属性 在使用 jQuery 的 css() 方法之前，需要确保页面已经加载了 jQuery 库。 读取单个 CSS 属性值： 使用 css() 方法的单个参数语法可以读取...
JavaScript 获取 CSS 属性值的代码 在 Web 开发中，获取 CSS 属性值是一项非常重要的任务，因为它可以帮助我们更好地控制网页的样式和布局。JavaScript 提供了多种方法来获取 CSS 属性值，本文将介绍其中的一些。 ...
当仅传递一个参数，即CSS属性名称，如"color"时，`css()`方法将返回该属性的当前计算值。计算值是指浏览器实际应用到元素上的样式，包括继承的、内联的和内部/外部样式表中的规则。 颜色属性`color`可以是各种形式...
其中一项常见需求是获取浏览器窗口的各种属性值，比如宽度、高度等，这对于响应式设计或某些特定功能（如弹窗位置计算）非常有用。 #### 一、主要窗口属性 在提供的代码示例中，通过`getInfo`函数展示了如何获取一...
JavaScript访问CSS属性主要涉及两种方式：通过元素访问和直接访问样式表，以及一个重要的概念——运行时样式。...此外，不同的浏览器可能对某些CSS属性或API的支持度不同，因此在编写代码时要考虑跨浏览器兼容性问题。
`:css`选择器允许你指定一个CSS属性和对应的值。 此外，jQuery还提供了`.filter()`方法，允许你提供自定义的过滤函数来筛选元素： ```javascript var redElements = $('*').filter(function() { return $(this)....
首先，要获取transform属性，可以使用jQuery的.css()方法，该方法允许我们访问选定元素的CSS属性值。在我们的例子中，我们关注的是获取transform属性的值。 其次，由于transform属性的值是一个字符串，其中可能包含...
总的来说，通过这个推荐的`getStyle`函数，开发者可以方便地在JavaScript中获取页面中元素的CSS属性值，无论这些属性是定义在行内样式、内部样式表还是外部样式表中。这个方法兼容多种浏览器，提高了代码的可移植性...
CSS属性涵盖范围广泛，包括颜色、字体、布局、动画等各个方面。 JavaScript（JS），则是一种轻量级的解释型编程语言，常用于网页和网络应用的前端开发，赋予网页动态功能。通过JavaScript，我们可以动态改变CSS样式...
4. 盒模型：理解盒模型的包含边距（border-box）和内容区域（content-box）模式，并解决相关的尺寸计算问题。 5. 动画和过渡：运用CSS3的动画和过渡效果，以及如何创建平滑的动态效果。 6. Flexbox和Grid：如何使用...
通过`transition`属性，可以平滑地改变一个或多个CSS属性，而`animation`则允许自定义更复杂的动画效果。 **CSS权重**： CSS的样式优先级受选择器权重影响，权重越大，样式越优先。权重计算包括标签权重、类权重、...
我们还使用了 `document.body.scrollLeft` 和 `document.body.scrollTop` 属性来获取文档的滚动位置，从而计算出鼠标相对于文档的坐标。 示例二：区块内位置获取 在第二个示例中，我们使用 CSS 和 JavaScript 实现...