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:

*{
    color:red;
}

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...

Ideas?



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 a line in a table with CSS

    How to get started creating CSS for given (dynamically generated) HTML?

    how to set up responsive columns with pure CSS?

    How to remove hover effect from a column of a table

    How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?

    How to change a vertical css menu to a horizontal one

    How to pass parameter in CSS and then how to apply if..else on that parameter in ASP.NET?

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    how to define variable in less

    CSS 3D containers like shown in post

    How to fix text running off screen and breaking layout without using CSS word-break property?

    How can I align a text that has a specific width at the center of a div?

    navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

    How to change CSS based on Season using JavaScript

    CSS - How to create a table cell with a two-colour background?

    how to get both icon and heading in same line in css

    How to css target “Tab” state of the input?

    How to make div expandable with content while setting min height property as well in CSS

    How to only show certain parts with CSS for Print?

    Showing images conditionally

    How to expand textarea to fit text vertically and horizontally?