0

我无法访问图像元素的左侧位置。这是我的 jsFiddle。警告框不显示任何内容。

<!DOCTYPE html>
<html>
<img src="pan.jpg" id="uno" width="600" />
<style>
#uno
{
position:relative;
left:100px;
}
</style>
<script>
     alert(document.getElementById("uno").style.left);
</script>
</html>
4

2 回答 2

3

JavaScript 的 style 属性只能访问内联样式。你会注意到它适用于这个：（jsFiddle）

<img src="pan.jpg" id="uno" width="600" style="left:125px;" />

我建议你要么只left在 JavaScript 中设置，要么在 CSS 中使用类，并检查类的对象而不是样式。

于 2013-03-14T11:29:52.973 回答
0

替代解决方案（如果您不定义内联样式，虽然有点复杂）

//document.styleSheets gives the list of available stylesheets for the document
//Here we have only one stylesheet hence document.stylesheets["0"] gives us the only stylesheet    
//document.stylesheets["0"].rules gives the object with defined css rules
var rules = document.styleSheets["0"].rules
//iterating over that object to find the object which has css for element ID "uno"
for(property in rules){
  if(rules.hasOwnProperty(property)){
    if(rules[property].selectorText === "#uno"){
      alert(rules[property].style.left);
    }
  }
}

更新后的文件

<!DOCTYPE html>
<html>
<img src="pan.jpg" id="uno" width="600" />
<style>
#uno
{
position:relative;
left:100px;
}
</style>
<script>
  var rules = document.styleSheets["0"].rules
  for(property in rules){
    if(rules.hasOwnProperty(property)){
      if(rules[property].selectorText === "#uno"){
        alert(rules[property].style.left);
      }
    }
  }
</script>
</html>

宁可使用 jquery 来为我们完成所有的繁重工作

于 2013-03-14T11:48:15.260 回答