如何让JavaScript读取给定ID附加CSS的值

时间:2014-04-30 17:40:15

标签: javascript jquery html css bootswatch

在我开始讨论这个异常奇怪的问题之前,我只是说我从来没有听说过以下黑客被应用,更不用说与我认识的任何网络程序员进行常规讨论了,而这只是出于好奇而在我和#39;在我的假设中我不能做到这一点。

话虽如此,这是我的问题:

  

使用基于最新Bootswatch版本的自定义CSS(实际上使用Cerulean主题),是否可以在隐藏的 p 标签 AND 之间附加文字JavaScript是否正确读取了附加的值?

额外信息:将值硬编码到HTML中时,JavaScript在读取值时没有问题。然而,当附加时(使用 #element:after ),JavaScript正在传递 null 值,我想因为在JavaScript已经检查以查看什么值后加载CSS是在那个特定的元素ID。

示例代码:

HTML

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

CSS

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

JavaScript读取ID&#34; valueOne&#34;要 null

感谢任何帮助。

谢谢!

ADDENDUM:使用Firebug在Firefox中进行调试时,附加文本会显示在“样式”部分中,因此追加本身可以正常工作。

修改

嘿,这就是答案似乎与我的环境有关......

的JavaScript

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

但是,我现在注意到这似乎不适用于移动设备。

我需要验证我无法进一步发布的JavaScript,但至少这可以解决当前问题,仅适用于台式机/笔记本电脑设备。

到目前为止,向@Blazemonger和@Mohamed Melouk寻求帮助! :d

2 个答案:

答案 0 :(得分:1)

伪元素不会加载到DOM上

JQuery与dom达成协议

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

这将起作用

答案 1 :(得分:1)

您可以使用可以阅读内容数据的javascript,它看起来像这样:

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

您的代码存在的问题是您将 display:none; 样式赋予 div ,这就是它根本没有读取任何值的原因(以及至少使用我上面提到的javascript),这意味着你必须首先渲染div而不是使它不可见

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

修改

...或者如果显示属性在CSS中,您始终可以找到解决方法 例如 this 之类的内容。