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);
  });

この場合、値は is''であり、notundefined

計算された値が必要ない場合は、これを行います

  $("#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 スタイル ノードに表示されないのはなぜですか?を参照してください。.