Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Modifying CSS using Javascript



11:22 am on Nov 14, 2008 (gmt 0)

5+ Year Member

Hi All,

I am curently working on a tool to edit the css. I intend to have a HTML page which should load the specified CSS file and render the details. Post that when i make modifications to the design aspects like Font color, background color, etc the changes should be saved onto the css file that is refered, so that the next time i open the HTML, it should load with all the changes made. This has to be done using Javascript.

In short i need to modify the CSS using file handling at run time.
Please help me as to how to go about this task. I am very new to Javascripting and have very limited knowledge in JS...
Your help will be very highly appreciated.


11:42 am on Nov 14, 2008 (gmt 0)

10+ Year Member

The Web Developer add-on [addons.mozilla.org] for Firefox contains more or less the functionality you describe. There you can edit (locally) the CSS and see the changes instantly rendered in the page.


11:47 am on Nov 14, 2008 (gmt 0)

5+ Year Member

i dont need to modify it locally... i need to modify the actual css file.


11:50 am on Nov 14, 2008 (gmt 0)

5+ Year Member

You want to do it on-site?


11:59 am on Nov 14, 2008 (gmt 0)

5+ Year Member

Thanks For your Interest....

Well let me explain it to you in this way... I ahve an application which uses the CSS for style rendering. Now in order to customize the application appearance, i want to have an HTML page from where i can change the different styling aspects, so that the CSS is actually modified. When the CSS gets modified, the next time i load the application, it will have the changed appearance.
Thus in order to make this customization, i will have an HTML page and use javascript to change the CSS.
Just like in MS Work, the HTML will have options like BOld, COlor, text color, etc. and when i make the changes in the HTML and click on a button for saving those changes, these chamges should be made in teh CSS so that the application on launch has the new look as customized.


12:04 pm on Nov 14, 2008 (gmt 0)

5+ Year Member

Are you making a web site or a stand-alone application?


12:28 pm on Nov 14, 2008 (gmt 0)

5+ Year Member

i am making a Standalone HTML file to modify CSS as per requirements.
This is being done so that a user not having knowledge of CSS can modify the CSS using this html page as per his whims.


9:16 am on Nov 21, 2008 (gmt 0)

5+ Year Member

Can anyone Please help me out? I am still stuck after 5 days!
any help will be highly appreciated...


11:58 pm on Nov 21, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

With just javascript you can't change the CSS on the server "for next time", nor for other users. You'll need authentication, server side scripting and the like to accept the changes back at the very least.
Editors to edit css and html exist out there, none of them is something simple. Esp not as you seem to want them to be able to edit the page the editor is in itself (that's like wanting to cut off the branch you're sitting on). I'd limit myself to a wysiwyg editor that edits something inside a window only, not the page it is sitting in itself. And then well you'll need a server component to work with the client component.

One of those editors I've seen is in java (not javascript, but few will notice the difference) and is customizable and very cross platform: FCKeditor

But it might not be what you seek, as I'm not sure what you want to achieve. Editing CSS isn't having B and i button in my mind.


Featured Threads

Hot Threads This Week

Hot Threads This Month