how to alter a css class directly?

Tags: javascript,css

Problem :

Is it possible, to use javascript to edit the contents of a .css file directly? (In turn, impacting the style of the elements that use the class being modified?)

I've seen a few answers to such a question, but they all deal with the dynamic creation of HTML and css code in the html document itself, which I don't quite want...

Say for example, I have the following code:


This makes ALL the text in the document go red. If I give the client an option to drop down and change the color of all the text to whatever he/she wishes, then the most logical choice is for me to go into the .css file, and edit the value of 'color' under the universal selector...


Solution :

You can do all your css manipulation in a single style element you append to the head- anything you put there takes precedence over the other stylesheets, and your users can 'backtrack' to the page defaults by deleting their changes, one at a time or all at once.

Using the last sheet (your new style element's rules) in the document.styleSheets collection, you can append new rules, delete old rules, or edit existing rules.

And you have a piece of text you can save on your server or in local storage for each user, possibly to add to the document the next time they visit.

    CSS Howto..

    How to make vertical menu with emenu extension in Yii?

    how to remove the css overflow:hidden of jquery dialog

    How to make an text float next to an image in HTML/CSS?

    How can I improve this markup and CSS to keep things simple and easy to work with?

    How to show hidden part of an image which is inside a fixed height div, using just the CSS?

    Css selector : How to reference a attribute inside a div

    How do I align an absolute position child element in the center of its parent div [duplicate]

    How to put html input text into an image using CSS?

    when we have a double border in a table , how do we fill in the gap beetween the two borders

    How to create spoiler text?

    How to - dynamically - change link text color in jQuery Mobile?

    How to move all content (relative,absolute,…) down?

    How to workaround: IE6 does not support CSS “attribute” selectors

    How to make a webpage mobile friendly with css media queries

    How to make dropdown hide when clicked anywhere outside of it?

    How to keep indent in lists with CSS?

    How can I center the table in the page?

    how to diplay two html elements seemlessly

    multiselect.js via gem multi-select-rails - how best to set width

    How to get the ultimate, final calculated style value on an HTML element?

    How to create a darker background on a whole page with one new div

    How to Inject external css style sheet into GWT Panel widget?

    How to fix the Wordpress (Twenty Eleven) CSS Menu Alignment?

    How to apply css for only second occurance

    How to insert FontAwesome inside Select2

    How to apply the grayscale jquery plugin to a background image?

    How do I make this sticky footer stick to the bottom of the layout when the sidebar exceeds screenheight?

    How to change default value in counter-increment?

    How to give all divs same amount of space on each side

    how to position these CSS elements without defining height and width