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
– adeneo, Commented Mar 25, 2013 at 21:19
Have you tried googling how to change inner content of elements with jquery / javascript? — awbergs
– awbergs, Commented Mar 25, 2013 at 21:19
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
– awbergs, Commented Mar 25, 2013 at 21:22

Blender · Accepted Answer · 2013-03-25 21:20:46Z

15

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/

answered Mar 25, 2013 at 21:20

Blender

300k55 gold badges462 silver badges512 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:04:56Z

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.

Comments

Johan Hoeksma · Accepted Answer · 2013-03-26 09:56:40Z

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, 2013 at 9:56

Johan Hoeksma

3,7765 gold badges32 silver badges40 bronze badges

Comments

Zia Khan · Accepted Answer · 2022-05-16 09:25:09Z

0

**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>

answered May 16, 2022 at 9:25

Zia Khan

4716 silver badges11 bronze badges

Comments

Friedrich -- Слава Україні · Accepted Answer · 2025-04-23 20:16:52Z

0

Here is demo for modifying the css content parameter.

div:before {
  content: attr(data-cnt);
}

<div id="div1" data-cnt="1"> </div>
<input type="number" value=1 onchange="div1.setAttribute('data-cnt', this.value)">

answered Apr 23 at 20:16

Friedrich -- Слава Україні

4,0481 gold badge34 silver badges53 bronze badges

Collectives™ on Stack Overflow

Is it possible to change CSS Content with js?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related