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样式节点为什么不显示样式表应用的样式？ 。