CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jamie Hutber
Jamie Hutber

Reputation: 28064

Editing specific inline <style> 's via javaScript

I have:

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

I would like to be able to target and edit `.container li a' without losing the other styles i have. 

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

This won't work as i will lose everything in there.

Worth mentioning that i'll have an infinity amount of elements being created so inline styles aren't an option.

Upvotes: 1

Views: 564

Answers (7)

Phortuin
Phortuin

Reputation: 770

This should be more or less what you're looking for: http://jsfiddle.net/ZH9JW/2/

The problem with this is that it's a very rigid regular expression; one space more or less, or no newline characters and the regular expression will fail. You can solve this ofcourse, but then you're starting to build a CSS parser. I recommend against using my solution.

Maybe this is something you could use? It's probably faster than $("#poop").css("color", "red"); if you're creating so many elements, but a bit of a hack:

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

This style element should by the way ideally be in the DOM after your original style element, or have more specific CSS.

Upvotes: 0

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66921

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

Upvotes: 0

dba
dba

Reputation: 240

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

Upvotes: 1

feeela
feeela

Reputation: 29932

You shouldn't edit your original CSS via JS, but add the desired rules the element which is to get styled:

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

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

Try something like $('#inlinestyle').append(' #poop { color: red; }'); or $('#poop').css('color', 'red');

Upvotes: 0

Isaac Gonzalez
Isaac Gonzalez

Reputation: 1734

wouldn't it just be better to target the element you want to modify ?

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

And if you'd like to add more than one property to the css of that precise element just do:

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

Upvotes: 7

Oswaldo Acauan
Oswaldo Acauan

Reputation: 2740

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

Upvotes: 2

Related Questions