How to have JavaScript read a value appended with CSS at a given ID

Question

Before I get started on this abnormally weird question, lemme just say that I have never heard of the following hack being applied let alone conventionally discussed with any web programmers I know, and this is merely out of curiosity in the event that I'm wrong in my hypothesis that it cannot be done.

That being said, here's my question:

Using a customized CSS based off of the latest Bootswatch version (actually using Cerulean theme), is it possible to append text between hidden p tags AND have JavaScript read the value appended properly?

Extra info: When hardcoding a value into the HTML, JavaScript has NO problem reading the value. When appending however (using #element:after for instance), JavaScript is passing a null value, I figure because the CSS loads after the JavaScript has already checked to see what value is at that particular element ID.

Example Code:

HTML

<div id="hiddenSecrets" style="display:none;">
<p id="valueOne"></p>
<p id="valueTwo"></p>
</div>

CSS

#valueOne:after { content:"2048"; }

JavaScript reads the ID "valueOne" to be null.

Any help is appreciated.

Thanks!

ADDENDUM: When debugging in Firefox using Firebug, the appended text displays in the Styles section, so the append itself works.

EDIT

Hey so, here's the answer that seems to work with my environment...

JavaScript

<script type="text/javascript">
var valueOne = document.getElementById('valueOne');
var valueOne2 = window.getComputedStyle{valueOne, ':after').getPropertyValue('content').replace(/"/g, "");
//...
</script>

However, I'm noticing now that this doesn't seem to work on mobile devices.

I'll need to validate the JavaScript that I can't post further, but at least this answers the immediate issue, if only for desktop/laptop devices.

Shoutout to @Blazemonger and @Mohamed Melouk for the help so far! :D

Javascript can only read what's in the DOM. CSS pseudo-elements aren't in the DOM. — Barmar
– Barmar, Commented Apr 30, 2014 at 17:43
possible duplicate of Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) — Blazemonger
– Blazemonger, Commented Apr 30, 2014 at 17:49
It's possible to add new :after styles, but I don't know of any way to read existing ones, except this — Blazemonger
– Blazemonger, Commented Apr 30, 2014 at 17:51
Yep, I'd already noted that in my answer here but had forgotten all about it. — Blazemonger
– Blazemonger, Commented Apr 30, 2014 at 18:26

bulanmaster · Accepted Answer · 2014-04-30 19:22:27Z

1

You could use javascript that you can read the content data with and it looks something like this:

var str = window.getComputedStyle($('#valueOne')[0], ':after')
                .getPropertyValue('content');

The problem that is with your code is that you are giving the display: none; style to your div and that is why it reads no value at all (well at least with the javascript that i mentioned above), which means that you have to first render the div and than make it invisible.

Here I made you a JSFiddle example.

EDIT:

... or if the display property is in the CSS you can always find a workaround.
Something like this for example.

edited Apr 30, 2014 at 19:22

answered Apr 30, 2014 at 19:11

bulanmaster

4013 silver badges17 bronze badges

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

2 Comments

DanceLink Over a year ago

I actually tested this on a few mobile devices, and it works! Marking this as solved! Thank you so much everyone! :D

bulanmaster Over a year ago

You're welcome and you should thank mostly for @Blazemonger for his awesome explanation on this question.

Mohamed Melouk · Accepted Answer · 2014-04-30 18:02:02Z

1

pseudo elements doesn't load on the DOM

JQuery deal's with the dom

so just replace your css by jquery
$('#valueOne').text('2048');

this will work

answered Apr 30, 2014 at 18:02

Mohamed Melouk

1922 silver badges12 bronze badges

1 Comment

DanceLink Over a year ago

While I'm sure that would work, it isn't quite what I'm going for. The css is being loaded into an engine of sorts, and is the only 'non-generic' tool used among different sites. While I could upload a jQuery file into the engine, my system isn't designed that way, hence I'm limited to using CSS. I'll upvote your solution though as it would appear viable on a stand-alone website.

Collectives™ on Stack Overflow

How to have JavaScript read a value appended with CSS at a given ID

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related