3

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

DanceLink
  • 49
  • 1
  • 2
  • 9
  • you simply cannot, as far as I know. – vsync Apr 30 '14 at 17:41
  • 1
    Javascript can only read what's in the DOM. CSS pseudo-elements aren't in the DOM. – Barmar Apr 30 '14 at 17:43
  • That's what I thought. My manager and a co-worker (neither of which are CSS experts) seem to think you can do this. I kinda found it funny when my colleague asked me, then my manager asked, and I found it less funny... – DanceLink Apr 30 '14 at 17:44
  • 1
    possible duplicate of [Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after) – Blazemonger Apr 30 '14 at 17:49
  • 1
    It's possible to add new `:after` styles, but I don't know of any way to read existing ones, except [this](http://stackoverflow.com/questions/7894577/read-css-property-of-an-element-using-javascript) – Blazemonger Apr 30 '14 at 17:51
  • I just looked at that, unfortunately the end-goal isn't to manipulate the element using CSS, but to have JavaScript pass off the appended value to another function, rather than just pass off a null value. Of course, in reviewing the linked article (thanks btw) as well as the above comments, it's clear that you cannot achieve this because of the DOM limitations of JavaScript (or any similar API for that matter). Actually I'm looking at your 2nd comment. Gimme a sec... – DanceLink Apr 30 '14 at 17:56
  • Actually @Blazemonger a colleague just linked me this [link](http://stackoverflow.com/questions/18456755/whats-the-industry-standard-way-to-pass-sass-variable-to-javascript/18457684#18457684) – DanceLink Apr 30 '14 at 18:15
  • 1
    Yep, I'd already noted that in my answer [here](http://stackoverflow.com/a/21709814/901048) but had forgotten all about it. – Blazemonger Apr 30 '14 at 18:26

2 Answers2

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

Mohamed Melouk
  • 182
  • 2
  • 11
  • 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. – DanceLink Apr 30 '14 at 18:23
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.

bulanmaster
  • 401
  • 3
  • 15
  • 1
    I actually tested this on a few mobile devices, and it works! Marking this as solved! Thank you so much everyone! :D – DanceLink Apr 30 '14 at 20:15
  • You're welcome and you should thank mostly for @Blazemonger for his awesome explanation on [this](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after) question. – bulanmaster Apr 30 '14 at 20:50