javascriptjquerycsstwitter-bootstrap

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 ?

Solution

  • 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/