Is it possible to change CSS Content with js?

Question

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 ?

Have you tried anything at all, as this should be fairly trivial to figure out with a Google search? At least you'll learn that jQuery can't access pseudo elements ! — adeneo, Mar 25 '13 at 21:19
Have you tried googling how to change inner content of elements with jquery / javascript? — awbergs, Mar 25 '13 at 21:19
possible duplicate of [Manipulating CSS :before and :after pseudo-elements using jQuery](http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery) — Derek 朕會功夫, Mar 25 '13 at 21:22
Why are you using content? Would it possibly be a better idea to actually make what you're using a real html element? Is that possible? — awbergs, Mar 25 '13 at 21:22

score 12 · Accepted Answer · answered Mar 25 '13 at 21:20

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/

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

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.

read more about it here

edited May 23 '17 at 12:04

Community

1
1

answered Mar 25 '13 at 21:23

Manish Mishra

12,163
5
35
59

score 0 · Answer 3 · answered Mar 26 '13 at 09:56

0

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.

answered Mar 26 '13 at 09:56

Johan Hoeksma

3,534
5
28
40

score 0 · Answer 4 · answered May 16 '22 at 09:25

**Angular template: Define myVar variable in ts file**

CSS

    .input-container{
     position: relative;
     }

   .input-container:after {
     position: absolute;
    right: 0px;
     top: 10px;
    content: attr(data);
   }

   
   <div class='input-container' [attr.data]="myVar">
    <input type='text'>
    <div>

Is it possible to change CSS Content with js?

4 Answers4

Linked

Related