1

I have style sheet with a class name "changebackgroundcolor" i want make change in css class at run time that color will change.

.changebackgroundcolor{
background-color: #21606E;}

if i change the back ground code in my color picker then it will make change here permanently.

is there any jquery for this or any asp.net code.

What i do for this?

Pankaj Mishra
  • 20,197
  • 16
  • 66
  • 103
  • When you say 'permanently' do you mean 1) until the user leaves this page, 2) for this user, forever, or 3) for all users, forever? – Jeff Sternal Oct 28 '09 at 15:43
  • for this user forever actually i want edit the css at that same time for this user – Pankaj Mishra Oct 28 '09 at 15:47
  • If you just want to do it for this user, you may want to track your css changes, submit them to the server via AJAX or somesuch method when the user is done customizing, store said changes in your database, then dynamically generate the CSS per page load based on the user that's logged in. A bit of work, but fairly straightforward. – 3Dave Oct 28 '09 at 15:54

6 Answers6

4

Is it possible to edit or modify css file at run time?

It is possible, but it's not advisable. What you're proposing is to make your asp.net application into a file editor. That would involve raising the privileges for your application's security context (the user under which it runs) which opens a big can of worms.

The simplest alternative is to inject classes into your asp.net page by writing a new <style type="text/css"> element to your page that includes the css classes you want to produce dynamically.

For example, you might save the background-color to a UserSettings table (or any other per-user persistence mechanism), then load it into your .aspx page like this:

<style type="text/css">
    .changebackgroundcolor {
        background-color: <%= user.BackgroundColor %>;
    }
</style>

Or you could keep the class definitions in a css file. Instead of emitting the classes directly into the page, dynamically write some jQuery code to change the definition of the class, following some of the examples from other answers.

Jeff Sternal
  • 47,787
  • 8
  • 93
  • 120
  • Doesn't sound like he wanted to modify the .css file - just the version that the browser has in memory for the current page. – 3Dave Oct 28 '09 at 15:30
  • @David - I think the opposite, based on the question name & the desire to "make change here permanently". I'll delete this right quick if it turns out otherwise though! – Jeff Sternal Oct 28 '09 at 15:33
  • i don't want this in page. I want to make change in .css file. – Pankaj Mishra Oct 28 '09 at 15:55
1

You can change all elements with the class "changebackgroundcolor" in jquery using:

$(".changebackgroundcolor").css("background-color", "#21606E");

This will take effect until your page is refreshed though, it won't save in the .css file.

Willson Haw
  • 398
  • 1
  • 4
  • 14
  • thanks for reply but i want to save in to .css file. Do you have another method for this? – Pankaj Mishra Oct 28 '09 at 15:48
  • You can save the background-color to a cookie and load it in. This way it will be different per user and will load the proper color when the user comes back to your website. I suggest using the $.cookie() plugin for this. – Willson Haw Oct 28 '09 at 16:49
1

Any changes you make adjusting the DOM (say, with jQuery) can't be permanent. You'll have to re-write the CSS file on each change, or perhaps generate a CSS file, style section in your HTML or jQuery code dynamically on each hit.

wojo
  • 11,061
  • 4
  • 22
  • 21
1

You can add, remove, and modify CSS styles at runtime. Here is a quick overview, the jQuery documentation is also very helpful.

Dave Swersky
  • 34,502
  • 9
  • 78
  • 118
  • That post refers to modifying the styles assigned to an object, not modifying the contents of the style, itself. I think the OP was looking for a way to change the style definition so that all objects that inherited that style would be affected by said changes. – 3Dave Oct 28 '09 at 15:28
  • And by "contents of the style," I mean classes explicitly created in CSS. – 3Dave Oct 28 '09 at 15:29
  • Actually i want to modify the class according to color and it will take effect on .css file also – Pankaj Mishra Oct 28 '09 at 15:50
1

I'm not aware of a way to modify the CSS definition itself, but you can modify based on class:

$('.changebackgroundcolor').css('background-color', '#21606e');

If you want to return to the default, use

$('.changebackgroundcolor').css('background-color', '');

In case it's not clear - both of those change objects that have a class of "changebackgroundcolor", like

<span id="mySpan" class="changebackgroundcolor"></span>

by adding a style attribute.

Update: Found a relevant SO thread with a link to a jQuery plugin that might do the trick: jQuery equivalent of YUI StyleSheet Utility?

Community
  • 1
  • 1
3Dave
  • 28,657
  • 18
  • 88
  • 151
0

You can't change existed css class. but you can redefine it - add new <style></style> to head with your new class something like this:

$('head').append('<style>YOUR NEW STYLE</style>');

Note for critics: Well, author asks about how to change entire style definition. Not about how to override settings of particular element(what of course can be done with jQuery css function).

My advice: create TWO different classes with different background colors and then use add/removeClass

Ilya Khaprov
  • 2,546
  • 14
  • 23