захват jquery генерируется CSS?

Question

Я работаю над небольшой игрушкой css / javascript, где ползунки дают пользователю контроль над свойствами css элементов на экране.Я думал, что в jQuery может быть способ извлечь текущие стили элемента - я знаю, что могу получить к ним доступ независимо, выполнив что-то вроде

$("#foo").css("bar")

Но было бы здорово, если бы я мог получитьна все стили, примененные к объекту одним махом.Возможный?(Тупая идея?)

Answer 1

Если это встроенный CSS, вы можете использовать это:

$("#element").attr("style");

И чтобы идти дальше и дальше:

var str   = $("#element").attr("style");
var style = str.split(";");
for(i=0;i<=style.length;i++){
    alert(style[i]);
}

Пример .

Answer 2

Вы можете получить текущие установленные встроенные стили для такого элемента, как этот:

$("#foo").attr("style");

Конечно, вам придется анализировать это самостоятельно.

Answer 3

С учетом гипотетической разметки:

<code><span id="test">Some content of 'test'</span>
<pre id="css">

Это, конечно, возможно, хотя и выглядит довольно извилистым:

$('#test').css({'background-color':'red','color':'white','display':'block'});
var $elem = $('#test');
var styles = document.getElementById('test').style;
var prop;

for(var i=0;i<styles.length;i++){
    prop = $elem[0].style[styles[i]];
    console.log(styles[i] + ': ' + prop);
}

JS Fiddle demo .

Пересмотренная и (слегка) уточненная версия вышеприведенного:

$('#test').css({'background-color':'red','color':'white','display':'block'});

var elem = document.getElementById('test');
var styles = document.getElementById('test').style;
var prop;

if (styles.length){
    $('#css').append('<ul></ul>');
    for(var i=0;i<styles.length;i++){
        prop = elem.style[styles[i]];
        $('<li />').text(styles[i] + ': ' + prop + ';').appendTo('#css ul');
    }
}

Демонстрация JS Fiddle .

Вышесказанное по сути разбираетвстроенные стили элемента, поскольку именно здесь jQuery (и JavaScript в целом) делает свои эффекты известными.Можно получить доступ к window.getComputedStyle(), но это кажется немного большим, чем вам нужно, поскольку, насколько я могу судить, вы хотите показать CSS, созданный инструментами на вашей странице.