编辑特定的内联<样式>'s通过javaScript

Editing specific inline <style> 's via javaScript

本文关键字：样式 gt javaScript 通过 lt 编辑      更新时间：2024-04-28

我有：

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

我希望能够在不丢失其他样式的情况下定位和编辑`.container lia`。

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

这行不通，因为我会失去里面的一切。

值得一提的是，我将创建无限数量的元素，所以内联样式不是一个选项。

以要修改的元素为目标不是更好吗？

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

如果你想在这个精确元素的css中添加多个属性，只需执行以下操作：

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

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

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

这或多或少应该是您想要的：http://jsfiddle.net/ZH9JW/2/

问题是它是一个非常严格的正则表达式；一个空格多或少，或者没有换行符，则正则表达式将失败。当然，您可以解决这个问题，但随后您就开始构建一个CSS解析器了。我建议不要使用我的解决方案。

也许这是你可以用的东西？如果你创建了这么多元素，它可能比$("#poop").css("color", "red");更快，但有点像黑客：

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

顺便说一句，理想情况下，这个style元素应该在原始style元素之后的DOM中，或者具有更具体的CSS。

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

您不应该通过JS编辑您的原始CSS，而是添加所需的规则-要设置样式的元素：

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

$('#inlinestyle').append('#poop { color: red }');
相关文章：