javascript 使用 jQuery 动态更改 CSS 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23162621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change CSS value dynamically with jQuery
提问by Dan P.
I have a div:
我有一个 div：
<div class="badger-left"></div>
This CSS:
这个CSS：
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
background-color: attr(bg-color);
}
This jQuery to add an attribute and a class:
这个 jQuery 添加一个属性和一个类：
$('.badger-left').addClass('badger-change').attr('bg-color','red');
Since jQuery can't do :afterlike in CSS, I thought of this way, but it's failing. What should I try?
由于 jQuery 不能:after像 CSS那样做，所以我想到了这种方式，但它失败了。我应该尝试什么？
Thanks
谢谢
Edit: The color would change dynamically from jQuery, it won't always be red.
编辑：颜色会从 jQuery 动态变化，它不会总是红色。
回答by G-Cyrillus
what you can do is to set background-color in .badger-changeand have .badger-change:afterinheritthis value.
你可以做的是设置背景颜色.badger-change并.badger-change:after继承这个值。
In .badger-changeyou need to set a background-colorand hide itwidth a gradient over it.
在.badger-change你需要设置一个background-color并隐藏它的宽度在它上面的渐变。
DEMO(hover the div to see it in action)
演示（将 div 悬停以查看其运行情况）
DEMO 2only change background-colorwithout switching classes.
DEMO 2只改变background-color不切换类。
You can think of other method with inherit , like a background image of 1 pixel set hundreds of pixel away from screen in parent container and setted as repeatin pseudo-element.
您可以考虑使用继承的其他方法，例如在父容器中设置距屏幕数百像素的 1 像素背景图像，并设置为repeat伪元素。
回答by Richard
How about just changing the class of .badger-left? So do something like this:
仅仅改变 .badger-left 的类怎么样？所以做这样的事情：
$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')
with css like this:
用这样的 css：
.badger-red:after {
background-color: red;
}
.badger-blue:after {
background-color: blue;
}
回答by AlienWebguy
So, you can't pass it in to a color value because it will be interpreted as a string instead of a reference. You can pass in the contentvalue to prove this point. On that note, you'll need to give your :aftersome layout, either with content or with some display or dimensions.
因此，您不能将其传递给颜色值，因为它将被解释为字符串而不是引用。你可以传入content值来证明这一点。在这一点上，您需要提供:after一些布局，包括内容或一些显示或尺寸。
Here is a hacky workaround. I would personally refactor this to not use the pseudo style, but this will work with your current implementation:
这是一个hacky解决方法。我会亲自重构它以不使用伪样式，但这将适用于您当前的实现：
function addStyle(color) {
$('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}
// example addStyle('red');
Working Demo: http://jsfiddle.net/3qK2G/
工作演示：http: //jsfiddle.net/3qK2G/
回答by WASasquatch
Establishing a color in your CSS prior to it being added would do the trick. Then changing that classes color later would change the badger-leftwith the new class badger-change
在添加 CSS 之前在 CSS 中建立一种颜色就可以解决问题。然后稍后更改badger-left该类的颜色将更改为新类badger-change
CSS
CSS
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
background-color: red;
}
jQuery
jQuery
$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class
$('#button').click(function(){ // When example button is clicked
$('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue
});
Here we are using a button for an example of changing the color.
此处我们使用按钮作为更改颜色的示例。
HTML
HTML
<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />
Some example content for badger-leftfor example.
例如一些示例内容badger-left。
When the page loads badger-leftis given the new class badger-changewith the BG being red. Then the button fires the jQuery to change that classes BG color to blue.
当页面加载时，BG 为红色badger-left的新类badger-change。然后按钮触发 jQuery 以将该类 BG 颜色更改为蓝色。
