javascript - javascript style.left 返回未定义？

Question

我已将我的 css 左选择器设置为 20%，但我得到未定义？

我的代码：

http://codepen.io/vincentccw/pen/ouhtk

$(document).ready(function(){

  $("#item1").click(function(){
    console.log(document.getElementById("item1").style.left.value);
  });

});

Answer 1

您需要删除value这是一个错误

  $("#item1").click(function(){
    console.log(document.getElementById("item1").style.left);
  });

在这种情况下，值是''而不是undefined

如果你不想要计算值，你会这样做

  $("#item1").click(function(){
     var element = document.getElementById("item1");
     console.log( window.getComputedStyle( element ).left );
  });

或与jQuery

  $("#item1").click(function(){
     console.log( $(this).css('left') );
  });

如果你想计算百分比，那么你可以这样做

  $("#item1").click(function(){
     var parent = $(this).parent().width();
     console.log( 100 * $(this).width() / parent );

  });

Answer 2

element.style仅包含内联样式或直接应用于该元素的样式。

要获取计算样式，包括从样式表继承的样式，您可以使用 jQuery 的.css()：

$('#item1').click(function(){
  console.log($(this).css('left'));
});

或者，对于本机解决方案，请参阅为什么 DOM 样式节点不显示样式表应用的样式？.