CSS Change [With JS]

Question

Im using StyleBot [Chrome Plugin] and made the following changes to a webpage:

td.forumRow {
font-style: normal;
font-family: Verdana;
font-variant: normal;
font-size: 8pt;
text-decoration: none;
}

td.forumRowHighlight {
font-size: 8pt;
font-family: Verdana;
}

span.normalTextSmaller {
font-family: Verdana;
font-size: 8pt;
}

tbody tr td {
font-family: Verdana;
font-size: 8pt;
}

a.linkMenuSink {
font-size: 8pt;
font-family: Verdana;
}

Instead of using StyleBot, is it possible to make the same changes but with a javascript script?

Yes, you can make CSS changes by using JavaScript. It's extremely easy when you use jQuery and marginally more difficult when you use plain JavaScript. — j08691, May 30 '12 at 20:43
How do you do it in jQuery? You can modify the styles but not the actual CSS rules, maybe I just haven't heard of it — Ruan Mendes, May 30 '12 at 20:44
possible duplicate of [How do you add CSS with Javascript?](http://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript) — Felix Kling, May 30 '12 at 20:46

score 4 · Accepted Answer · answered May 30 '12 at 20:45

4

Yes. Here...

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "PASTE YORU CSS HERE"
top.document.body.appendChild(css);

Kee in mind, where it says "PASTE YOUR CSS HERE" you must remove all the line breaks. Use this tool to do that: http://www.minifycss.com

answered May 30 '12 at 20:45

alt

13,357
19
80
120

1

Also, my answer is pure javascript, no jQuery needed to be installed. – alt May 30 '12 at 20:45
If you just need to create new styles, that works. If you need to update existing styles, you need more than this. – Ruan Mendes May 30 '12 at 20:46
1

@JuanMendes: Well, later rules overwrite previous once, so updating could be achieved by inserting the new styles after the existing ones. – Felix Kling May 30 '12 at 20:48
@FelixKling It's not very elegant if you need to keep appending rules just to change the meaning of an existing rule – Ruan Mendes May 30 '12 at 20:49
This is the most elegant solution unless you want to get into jQuery, which the asker didn't mention, and specifically said javascript. But yes, the web's primary scripting language kinda sucks. – alt May 30 '12 at 22:35

glarkou · Answer 2 · 2012-05-30T22:33:36.657

0

You can easily do that with jQuery:

In your situation:

$("<style type='text/css'> td.forumRow { font-style: normal; font-family: Verdana; font-variant: normal; font-size: 8pt; text-decoration: none;}</style>").appendTo("head");

edited May 30 '12 at 22:33

answered May 30 '12 at 20:45

glarkou

7,023
12
68
118

OP wants to change the CSS rule, not the inline-styles for all the matching elements. For example, if a new item is added, the new styles should still apply – Ruan Mendes May 30 '12 at 20:53
That would do it. But your answer is all over the place now, yo should remove code that doesn't apply to the question. The jQuery solution, though it works, is not very elegant, there's no need for jQuery as it doesn't provide anything that straight JS doesn't already. You can see that Jackson's solution is quite clear. – Ruan Mendes May 30 '12 at 21:31

Ruan Mendes · Answer 3 · 2012-05-30T20:54:15.010

0

Ext-JS does it using http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.CSS

Source code: http://docs.sencha.com/ext-js/4-1/source/CSS.html#Ext-util-CSS

Ext.util.CSS.updateRule("td.forumRow", "font-style", "normal");

I'm not suggesting you bring in the entire library, just use their code for inspiration on how to make it cross browser.

edited May 30 '12 at 20:54

answered May 30 '12 at 20:47

Ruan Mendes

90,375
31
153
217

CSS Change [With JS]

3 Answers3