0

Here is an example:

This is the normal css:

h1{
  background-color: #fafafa;
}

I would like to change this to the following:

h1{
  background-color: default or any id name 
}

Where can I give a javascript command to change this color code(i.e #fafafa)? Where ever it is in the stylesheet to default or any id name. So that I can use it in a color switcher to change the color for this code. I don't want to use less because I have already gone way to far in my project.

Chamika Sandamal
  • 23,565
  • 5
  • 63
  • 86
Md Nadeem
  • 41
  • 1
  • 2
  • 9
  • yea i agree css we cant do that, but is it possible using javascript wre i can give a style sheet name and change the color code in that style sheet only – Md Nadeem Aug 16 '13 at 10:34
  • 4
    I suggest you look at CSS frameworks like: SASS, LESS or similar – Stefan Aug 16 '13 at 10:35
  • agree i can use less but now i cant use less as i have gone way to far in my project – Md Nadeem Aug 16 '13 at 10:36
  • Do you want to do this on a fly, when user use some color chooser? – Nikolai Borisik Aug 16 '13 at 10:38
  • its somthing like this i hav a portal and hav a backend for it wen the user selects the color in the backend the color is going to change for the portal, and here i am wre the requirment from the client at this point wre i cant change my css to less so i want to know if there is any javascript for this wre i can select a color code and change it to id so that i can use it in the color switcher – Md Nadeem Aug 16 '13 at 10:45
  • Why can't you change it? Valid CSS should be valid LESS. – cimmanon Aug 16 '13 at 10:57
  • ok i have tried using http://toki-woki.net/p/least/ this site to change ma css to less but the problem is i am having a problem to implement in ma project as the error shows its a mime type text/plain and its not aplicable – Md Nadeem Aug 16 '13 at 11:02

3 Answers3

1

You can not do that as CSS is completely static what you can do is when you want to change the color for that element on a particular condition you can add an id to the element using javascript/jQuery by enclosing the element in a span/div in the first place. and write a new css for that particular id. so on your desired event new css will apply to that element and color will be changed at runtime.

dirtydexter
  • 1,063
  • 1
  • 10
  • 17
  • thanks, but its not for an instant or for only one div or span its for the whole portal wre ever i have used the color code xyz – Md Nadeem Aug 16 '13 at 10:47
  • so you can add a class to the div's and have other color code for the particular class. This is how we do things in CSS. – dirtydexter Aug 16 '13 at 10:49
  • so it means i have to remove the property background color wre ever i have used in the style sheets and create one common class or id for it so that i can use this class or id in the javascript to change it – Md Nadeem Aug 16 '13 at 10:52
  • 1
    If you are using the same color everywhere and you also want to change tot he same color then yes and this will advisable too because if in future you want to change color to something else then you won't have to make th changes everywhere again and again. What you should do is add a class to them by default say `class1` and in the css define default color for them and on the event change their class to `class2` and define different color for `class2` in css. – dirtydexter Aug 16 '13 at 10:57
  • @MdNadeem did it work for you? – dirtydexter Aug 17 '13 at 05:22
  • nop instead i converted ma css to less thank you soo much as this was ma last option – Md Nadeem Aug 17 '13 at 06:46
0

Either you use some variables for example in the style you can use this: 

var width = "150px";

And in the container use something like: 

<div style="width: @width">A div with width 150px.</div>

But brother there is no default value for them.
As the code you are showing is using a hex value for a color. That cannot be converted to a default name. However using variable can do it. Or you can try using rgba. But there isn't any default name. However You can try to write the color name itself as: 

color: white;

or 

color: red;

But I am not sure it will work for you for your job.

Afzaal Ahmad Zeeshan
  • 15,669
  • 12
  • 55
  • 103
-3

You can give name to css property through this font-family

p
{
font-family:"Times New Roman",Georgia,Serif;
}
Derrick Shepard
  • 5
  • 1
  • I have no idea what you are trying to say but it doesn't seem like the thing he is trying to achieve. – Stefan Aug 16 '13 at 10:49