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/

Answer 2

如果你的意思是，你可以使用javascript / jQuery修改给定css rules的{{1}}，那么你就不能这样做。

但是，您可以使用jQuery .css动态添加新的CSS规则。

阅读more about it here

Answer 3

你可以使用很多：

// style editing
.attr()
.css()

// text editing
.html()
.append()

但也许最好添加你真正想要的东西，下次也发布html。而你想要的结果。

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

3 个答案: