How to read CSS Content value with jQuery?

Question

Ok,this is bothering me, i beleive it is simple but I am having trouble.

I have a css definition:

.isMobile{content:'No'}

And I have HTML:

<ins class="isMobile"></ins>

My question is how I read the content value into javascript using jQuery. I have tried, google and tried again and the closest I can get is

$("ins.cdo").css( "content" );

which returns "" not undefined. The desired result is either Yes or No.

Any help would be most appreciated.

Your JQuery is not targeting your HTML maybe?, otherwise it should work. Try removing the '.cdo' part — BravoZulu
– BravoZulu, Commented Jul 30, 2015 at 17:16

dhouty · Accepted Answer · 2015-07-30 17:50:29Z

2

The CSS content property is used with the :before and :after pseudo elements and shouldn't be used in the way you are intending.

Instead, this sounds like a good use case for data attributes. Here is how you would achieve your intended results with them:

First add the data-content attribute to your ins element, assigning it the value "No".

<ins class="isMobile" data-content="No"></ins>

Then with jQuery, you can get the value of the data attribute like this

$(".isMobile").data("content");

You can also change the value of the attribute like this

$(".isMovile").data("content", "Yes");

edited Jul 30, 2015 at 17:50

answered Jul 30, 2015 at 17:26

dhouty

1,98912 silver badges21 bronze badges

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

Comments

rrk · Accepted Answer · 2015-07-30 17:19:32Z

0

This can fetch the value of the CSS property.

$("ins.isMobile").css( "content" );

answered Jul 30, 2015 at 17:19

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Comments

shashank obulampalli · Accepted Answer · 2015-07-30 17:20:32Z

0

The reason why you are unable to get the content property is because your selector is wrong try this

$("ins.isMobile").css("content");

answered Jul 30, 2015 at 17:20

shashank obulampalli

3511 silver badge5 bronze badges

Comments

zobidafly · Accepted Answer · 2024-07-08 16:01:35Z

I totally agree with @dhouty and the given answer, what you want is a bit weird and... it's an old one, but if you really want to do it, there are several ways to do it

either you parse the styleSheets inside your document
either you use window.getComputedStyle and its getPropertyValue

in both ways, YAGNI JQuery

the problem with the first option: you won't get the cascaded value, so let's use the second option which is more accurate.
in your case then, if you type:

window.getComputedStyle(
          document.querySelector("ins.isMobile")
     ).getPropertyValue("content")

you'll get the value "No"

in this command, document.querySelector("ins.isMobile") has its JQuery value as $("ins.isMobile")[0], getting the first element in your document that matches with your query

if, for some reason, you need a pseudo-selector, that's what we usually do when setting content, e.g. your css will look like this

.isMobile:before{content:"no";}

then window.getComputedStyle accepts a second argument which is your pseudo-element=>

window.getComputedStyle(
          document.querySelector("ins.isMobile"),
          ":before"
     ).getPropertyValue("content")

you'll get the value "no"

Collectives™ on Stack Overflow

How to read CSS Content value with jQuery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related