Question

例如，

<html>
  <head><link rel="stylesheet" type="text/css" href="theme.css"></head>
    <body>
      <img id="tmp"></img>
    </body>
</html>

在theme.css中

img#tmp{
      width:120px;
      top:0;
      left:0;
      }

无论如何，我可以直接通过JavaScript获取图像“tmp”的宽度吗？像什么一样的东西 var temp=document.getElementById("tmp"); var width=temp.style.width？

Answer 1

你肯定会想要JQuery的帮助。 Here是所有JQuery函数的列表，可以帮助您访问所需的所有样式信息（希望如此）。

顺便说一句，如果你不熟悉某种Javascript库，那么学习它可能是一个好主意。

Answer 2

我是第二个Nadir的动议，但在您的直接示例中，您可以将代码更改为：

var temp=document.getElementById("tmp");
var width=temp.style.width;

在您自己的示例中，您通过复数使用了错误的getElementById。

This comment总结了原因。

Answer 3

你所追求的是元素的计算风格。像往常一样，IE6-8的表现方式不同，所以我们需要做一些嗅探：

var getStyle = window.getComputedStyle ? function (elem, prop) {
    var styles = getComputedStyle(elem, null);
    return prop ? styles[prop] : styles;
} : function (elem, prop) {
    return prop ? elem.currentStyle : elem.currentStyle[prop];
};

Answer 4

你走了：

getComputedStyle( elem ).getPropertyValue( 'width' )

其中elem是DOM元素。

现场演示： http://jsfiddle.net/7h4cg/

顺便说一下，某些浏览器的某些旧版本不支持此代码。如果您需要跨浏览器解决方案，请使用跨浏览器库。

Answer 5

这是我的跨浏览器内联函数：

function getComputedStyle(elem, styleAttr){
    return (elem.currentStyle ? elem.currentStyle : document.defaultView.getComputedStyle(elem, null))[styleAttr];
}

Answer 6

有些浏览器会返回文字样式的宽度和高度，因为它是在css中写成的pecentage或em multiple，而其他浏览器则将所有样式尺寸转换为像素。

在这种情况下，我会使用document.getElementById('tmp').offsetWidth来确保以像素为单位获取渲染宽度，无论它是如何分配的。

反正有没有使用javascript获取CSS确定的属性？

6 个答案: