javascript style.left返回undefined？

Question

我已經設置了我的css左選擇器值爲20％，但我得到undefined ??

我的代碼：

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

如果你wan't計算的值，你會做這個

$("#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')); 
}); 

或者，對於本機的解決方案，請參閱Why doesn't the DOM style node show styles applied by a style sheet?。