Is it possible to change CSS Content with js?

问题

I am using Bootstrap in my project and i need small wrapper. I get it from twitters source and it looks like:

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;
}

So is it possible with JS (jQuery) or or somehow different change content property dynamically ?

回答1:

You cannot modify pseudo-elements with jQuery (unless you want to add <style> tags). You can, however, change your CSS to make this easier:

content: attr(data-text);

The text will be contained within an attribute on the element:

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

Now, you can change the attribute with jQuery and the text will change:

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

Demo: http://jsfiddle.net/8qNjv/

回答2:

if you meant, can you modify the css rules of a given css class using javascript/jQuery, then you cannot do so.

however, you can use jQuery .css to add new CSS rules dynamically.

回答3:

You can use a lot:

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

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

But maybe its better to add what you realy want, post also the html next time. And what you want as result.

来源：https://stackoverflow.com/questions/15624929/is-it-possible-to-change-css-content-with-js

标签

javascript

jquery

css

twitter-bootstrap