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

4

2 回答 2

1

伪元素不会加载到 DOM 上

jQuery 处理 dom

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

这会起作用

于 2014-04-30T18:02:02.657 回答
1

您可以使用可以读取内容数据的 javascript，它看起来像这样：

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

您的代码存在的问题是您正在显示：无；为您的div设置样式，这就是为什么它根本没有读取任何值（至少使用我上面提到的 javascript），这意味着您必须首先渲染 div 而不是使其不可见。

在这里，我为您做了一个JSFiddle示例。

编辑：

...或者如果显示属性在 CSS 中，您总能找到解决方法。
例如像这样的东西。

于 2014-04-30T19:11:49.583 回答