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?.