是否可以使用 js 更改 CSS 内容？

Question

我在我的项目中使用Bootstrap，我需要小包装器。我从 twitters 来源得到它，它看起来像：

section#my-content {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    margin: 15px 0;
    padding: 39px 19px 14px;
    position: relative;
}
section#my-content:after {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #9DA0A4;
    content: "Example";
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 3px 7px;
    position: absolute;
    top: -1px;
}

那么是否可以使用 JS (jQuery) 或以某种方式content动态更改属性？

Answer 1

你不能用 jQuery 修改伪元素（除非你想添加<style>标签）。但是，您可以更改 CSS 以使其更容易：

content: attr(data-text);

文本将包含在元素的属性中：

<div data-text="This is the default text">Test</div>

现在，您可以使用 jQuery 更改属性，文本将更改：

$('h1').attr('data-text', 'This is some other text');

演示：http : //jsfiddle.net/8qNjv/