CSS

Question

我有一个div：

<div class="badger-left"></div>

这个CSS：

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
    background-color: attr(bg-color);
}

这个jQuery添加了一个属性和一个类：

$('.badger-left').addClass('badger-change').attr('bg-color','red');

由于jQuery不能像CSS一样:after，我想到了这一点，但它失败了。我该怎么办？

由于

编辑：颜色会从jQuery动态变化，它永远不会变红。

Answer 1

您可以做的是在.badger-change中设置背景颜色并让.badger-change:after 继承此值。

在.badger-change中，您需要在其上设置background-color和隐藏宽度渐变。

DEMO （将div悬停在行动中）

DEMO 2 仅在不切换课程的情况下更改background-color。

您可以考虑使用继承的其他方法，例如1像素的背景图像设置距离父容器中的屏幕数百像素，并在伪元素中设置为repeat。

Answer 2

如何更改.badger-left的类？所以做这样的事情：

$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')

用这样的css：

.badger-red:after {
    background-color: red;
}

.badger-blue:after {
    background-color: blue;
}

Answer 3

因此，您无法将其传递给颜色值，因为它将被解释为字符串而不是引用。您可以传递content值来证明这一点。在这方面，您需要为:after提供一些布局，包括内容或某些显示或尺寸。

这是一个hacky解决方法。我个人会重构这个不使用伪样式，但这将适用于您当前的实现：

function addStyle(color) {
    $('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}

// example addStyle('red');

工作演示：http://jsfiddle.net/3qK2G/

Answer 4

在CSS添加之前在CSS中建立颜色就可以了。然后，稍后更改该类颜色会使用新类badger-left

更改badger-change

CSS

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
    background-color: red;
}

的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

});

这里我们使用一个按钮作为改变颜色的例子。

HTML

<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />

例如badger-left的一些示例内容。

当页面加载badger-left时，新类badger-change的BG为红色。然后按钮触发jQuery将BG类颜色更改为蓝色。

使用jQuery动态更改CSS值

4 个答案:

CSS

的jQuery

HTML

JSFiddle Example