編輯特定的內聯<style> 's via javaScript

Question

我有：

<style id=inlinestyle>
    .container {
        height: 0;
    }
    .container li {
        height: 10px;
    }
    .container li a {
                 color: pink;
    }
</style>

我希望能夠定位和編輯`.container li a'而不會丟失我擁有的其他樣式。

 $('#inlinestyle').html('#poop { color: red }');

這將行不通，因為我將在那里失去一切。

值得一提的是，我將創建無限數量的元素，因此無法選擇內聯樣式。

Answer 1

定位要修改的元素會更好嗎？

$('#poop').css('color','red');

如果您想為該精確元素的css添加多個屬性，請執行以下操作：

$('#poop').css({
    'color' : 'red',
    'font-size' : '16px',
    ......
});

Answer 2

$('#inlinestyle').append('.container li a { /* css here */}');

Answer 3

$('.container li a').css("color", "blue");

Answer 4

試試$('#inlinestyle').append(' #poop { color: red; }'); 或$('#poop').css('color', 'red');

Answer 5

$('#inlinestyle').append('#poop { color: red }');

Answer 6

您不應該通過JS編輯原始CSS，而是將所需的規則添加到要設置樣式的元素中：

/* What about: */
$( '.container li a' ).css( 'property', 'value' );
/* or */
$( '.container li a' ).css( {
    'property1': 'value1',
    'property2': 'value2'
} );

Answer 7

這應該或多或少是您所尋找的： http : //jsfiddle.net/ZH9JW/2/

問題在於這是一個非常嚴格的正則表達式； 一個或多個空格，或者沒有換行符，並且正則表達式將失敗。 您當然可以解決此問題，但是隨后您將開始構建CSS解析器。 我建議不要使用我的解決方案。

也許這是您可以使用的東西？ 它可能比$("#poop").css("color", "red");更快$("#poop").css("color", "red"); 如果您要創建許多元素，但是有點hack：

var newStyle = $("<style/>").html(".container li a { color: red }");
$("body").append(newStyle);

理想情況下，此style元素應位於原始style元素之后的DOM中，或者具有更特定的CSS。