在元素上使用css属性内容异常分析存储javascript信息

我使用variable.less配置文件来存储有关设计的所有相关信息。 其中一个信息是移动布局和PC布局之间的断点。 我还需要javascript中的这些信息，但我不知道如何获取这些信息（不将其存储在数据属性中，因为我希望将所有设计变量保存在同一个文件中）

所以我最终发现： 我将断点存储在变量中。减去：

@bk-point: "500px";

我使用css属性“content”，但不是在伪元素上，而是在任何标记上（更少的文件）：

这样，这不会影响设计（“content”属性不显示在元素上，只显示在伪元素上），我可以通过jQuery很容易地获得它：

var bkPoint = $('#any-div').css('content');

我所有的变量都在less文件中

这是完美的我想要的，但有任何副作用，我没有看到？出于我无法想象的原因，这是一种糟糕的做法吗

谢谢你的建议

塞巴斯蒂安

附言：
1.适用于firefox 21.0和chromium 27.0

---

2.当然，如果您有更好的解决方案……

css“content”属性仅对伪元素有效：

虽然这似乎是一个很酷的想法，但在生产中使用它我会感到不舒服。我认为您应该接受js变量和css变量将位于两个不同的文件中，然后通过数据属性应用这些值

但是，如果您真的想要一种创造性的方法，仅从可以打印到html并因此与javascript交互的css文件执行此操作，那么使用不会影响设计的有效属性如何

您真正要做的就是在html中存储一个字符串，这样您就可以使用一个相当模糊的元素，例如counter reset，然后通过jquery.css（）获取值

简单的正则表达式函数，可以去掉返回字符串中的“断点”部分，从而得到所需的内容。 顺便说一句，您可以在未使用的任何其他css属性上执行此操作，例如：

 border-width: @bkpoint;
 border: none;

如果您感兴趣，计数器重置的规格：

---

我可以想象浏览器中的

内容确实显示在非伪元素上。。。另一方面，我也可以想象浏览器完全忽略非伪元素上的
内容
；也就是说，不将内容存储在任何地方。是的，我想没有任何东西可以保证，即使它现在可以工作，它在几年后仍然可以工作……对。不过还是个聪明的主意。我很喜欢这个主意。我看不出有什么大的缺陷。使用计数器重置是聪明的，但不确定它在浏览器中的效果如何。在我的测试中，在
：after
伪元素（带有
显示：none
）上使用content属性非常可靠：@stevax，这正是我试图实现的，但我不知道如何使用js获得：after伪元素。您的链接非常完美@steveax非常像您的coderwall示例。非常好的响应性设计的补充。关于调用js的伪元素，我唯一的评论是，在复杂的布局/体系结构中，实际上还需要应用一些数据属性。而且（据我所知），这些只能应用于元素，而不能应用于伪元素，因此如果可以针对相同的元素，那么会更容易。另外，计数器重置是CSS级别2，具有非常高的浏览器支持，包括IE8。但是，正如我在回答中所说，只要不影响布局，您可以在任何属性上执行此操作。
variables.less: @bkpoint = 500;
css:
#any-div {
   counter-reset: break-point @bkpoint;
}
jquery:
$('#any-div').css('counter-reset'); // returns: 'break-point 500'

 border-width: @bkpoint;
 border: none;