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");更快，但有点像黑客：

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

理想情况下，此style元素应该位于原始style元素之后的DOM中，或者具有更具体的CSS。

通过javaScript </style>编辑特定的内联<style>

7 个答案: