This question already has an answer here:
这个问题在这里已有答案:
- Creating CSS Global Variables : Stylesheet theme management [duplicate] 6 answers
- Is there any way to use variables in css? 3 answers
创建CSS全局变量:样式表主题管理[重复] 6个答案
有没有办法在css中使用变量? 3个答案
Here is an example:
这是一个例子:
This is the normal css:
这是正常的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.
我在哪里可以用javascript命令来改变这个颜色代码(即#fafafa)?样式表中的默认位置或任何id名称。这样我就可以在颜色切换器中使用它来改变这段代码的颜色。我不想少用,因为我已经在我的项目中走得很远了。
3 个解决方案
#1
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.
你不能这样做,因为CSS是完全静态的你可以做的是当你想在特定条件下改变该元素的颜色时你可以使用javascript / jQuery通过将元素包含在span / div中来向元素添加id首先。并为该特定id写一个新的CSS。所以在你想要的事件中,新的css将应用于该元素,颜色将在运行时更改。
#2
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:
但兄弟没有默认值。由于您显示的代码使用十六进制值作为颜色。无法将其转换为默认名称。但是使用变量可以做到。或者你可以尝试使用rgba。但是没有任何默认名称。但是,您可以尝试将颜色名称本身写为:
color: white;
or
color: red;
But I am not sure it will work for you for your job.
但我不确定这对你的工作是否有用。
#3
-3
You can give name to css property through this font-family
您可以通过此font-family为css属性命名
p
{
font-family:"Times New Roman",Georgia,Serif;
}
#1
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.
你不能这样做,因为CSS是完全静态的你可以做的是当你想在特定条件下改变该元素的颜色时你可以使用javascript / jQuery通过将元素包含在span / div中来向元素添加id首先。并为该特定id写一个新的CSS。所以在你想要的事件中,新的css将应用于该元素,颜色将在运行时更改。
#2
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:
但兄弟没有默认值。由于您显示的代码使用十六进制值作为颜色。无法将其转换为默认名称。但是使用变量可以做到。或者你可以尝试使用rgba。但是没有任何默认名称。但是,您可以尝试将颜色名称本身写为:
color: white;
or
color: red;
But I am not sure it will work for you for your job.
但我不确定这对你的工作是否有用。
#3
-3
You can give name to css property through this font-family
您可以通过此font-family为css属性命名
p
{
font-family:"Times New Roman",Georgia,Serif;
}