How to remove this head css styling with javascript?

Question

How would you remove 00bf00 part from this:

#main { background:#00bf00 00bf00 url('images/low.png') repeat;  }

I need to do this with dynamically, so probably javascript ( or something else if you have idea)

I don't want to change code to output properly, just to see if there is a way to remove it by adding code snippet

I wouldn't want to bet on browser error recovery not having discarded the rule already. I'd really look at fixing it before it gets delivered to the client. — Quentin
– Quentin, Commented Jun 9, 2012 at 22:17
@ZarkoDjuric What way are you used to load this style? link tag or style tag? — Fong-Wan Chau
– Fong-Wan Chau, Commented Jun 9, 2012 at 23:17

mVChr · Accepted Answer · 2012-06-10 00:40:57Z

2

// for imported stylesheets
var cssRules = [];
for (var i = 0, il = document.styleSheets.length; i < il; i++) {
    if (document.styleSheets[0].cssRules)
        cssRules = document.styleSheets[0].cssRules;
    else if (document.styleSheets[0].rules)
        cssRules = document.styleSheets[0].rules;
    for (var j = 0, jl = cssRules.length; j < jl; j++) {
        if (/^#main/.test(cssRules[j].cssText))
            cssRules[j].cssText = cssRules[j].cssText.replace(/[^#]00bf00/, '');
    }
}

// for style tags
var styleTags = document.getElementsByTagName('style');
for (var i = 0, il = styleTags.length; i < il; i++) {
    styleTags[i].innerHTML = styleTags[i].innerHTML
                                         .replace(/(#main.*)[^#]00bf00/, '$1');
}

See demo (for style tags)

answered Jun 10, 2012 at 0:40

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ram · Accepted Answer · 2012-06-09 22:17:45Z

0

you cannot modify css properties directly within the head tag, try this:

$('#main').css('background-color', "transparent");

or:

document.getElementById('main').style.backgroundColor = 'transparent';

edited Jun 9, 2012 at 22:17

answered Jun 9, 2012 at 22:10

Ram

145k16 gold badges174 silver badges201 bronze badges

6 Comments

zarkoz Over a year ago

won't help, this needs higher lower level of javascript probably

Bart Wegrzyn Over a year ago

None is actually not a valid value for background-color. Use "transparent" instead.

Quentin Over a year ago

"you cannot modify css properties directly within the head tag" — Yes, you can.

Quentin Over a year ago

The question isn't about setting the background colour to transparent, it is about removing the invalid section from the rule. i.e. the bold bit here: #00bf00 00bf00 url

Ram Over a year ago

@Quentin yes, can you suggest a solution?

|

Bart Wegrzyn · Accepted Answer · 2012-06-09 22:28:25Z

0

As Quentin has said, the browser may already have removed this rule, so you can't really edit it.

One the other hand, you can take a look at client side css parsing. LESS has a client side version of their CSS processor, which essentially looks at the available CSS source, and modifies it before returning it to the browser. The LESS source code is open source, so you can see how it does this. Unfortunately, this is a rather complicated process and overkill for something like this. You would be much better off fixing the CSS before it gets delivered to the browser.

edited Jun 9, 2012 at 22:28

answered Jun 9, 2012 at 22:14

Bart Wegrzyn

2,2921 gold badge16 silver badges16 bronze badges

1 Comment

Quentin Over a year ago

The question isn't about setting the background colour to transparent, it is about removing the invalid section from the rule. i.e. the bold bit here: #00bf00 00bf00 url

Martin Hansen · Accepted Answer · 2012-06-10 00:25:09Z

0

If you just want to change the style of an element that already exists then just do

document.body.style.background = '#00bf00 url(\'images/low.png\') repeat';

If you need to change the style itself to make it apply to future elements as well then overwrite the selector with the correct value.

$('head').append('<style>#main { background:#00bf00 url(\'images/low.png\') repeat;  }  </style>')

(this example assumes the existing style is in the head, so that the new one is inserted after the existing one)

answered Jun 10, 2012 at 0:25

Martin Hansen

5,2543 gold badges35 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to remove this head css styling with javascript?

4 Answers 4

See demo (for style tags)

Comments

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

See demo (for style tags)

Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related