使用元素上的css属性内容来为javascript异常存储信息

我使用variable.less配置文件来存储有关设计的所有相关信息。其中一个信息是移动版面和PC版面之间的断点。我也需要JavaScript中的这些信息，并且我不知道如何获取它（不将它存储在数据属性中，因为我希望将所有设计变量保留在同一个文件中）。使用元素上的css属性内容来为javascript异常存储信息

所以，我终于发现：我在我的破发点存储在variables.less：

@bk-point: "500px";

我使用的CSS属性的“内容”，而不是一个伪元素，但在任何标签（更少的文件）：

#any-div { 
    content: "@{bk-point}"; 
}

这样，这并不影响设计（“内容”属性不显示元素，只在伪元素），我可以用jQuery让它很容易：

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

而我所有的变量都在较少的文件中。

这对我想要的是完美的，但是有没有任何副作用，我没有看到？由于我无法想象的原因，这是一个不好的做法吗？

感谢您的建议！

Sébastien。

PS：
1.在Firefox 21.0和27.0铬
2.当然，如果你有一个更好的解决方案...

来源

2013-09-01 Sébastien

我能想象的浏览器，其中'content' _does_显示非伪元素......另一方面，我也可以想象浏览器完全忽略了非伪元素上的“content”;也就是说，不在任何地方存储内容。 –

是的，我想没有什么能保证即使它现在可以工作，它仍然可以在几年内工作... –

没错。但仍然是一个聪明的主意。 –

CSS的“内容”属性只在伪有效元素： https://developer.mozilla.org/en-US/docs/Web/CSS/content

尽管这似乎是一个很酷的想法，但我觉得在生产中使用它并不舒服。我认为你应该接受你的js变量和css变量将在2个不同的文件中，然后通过数据属性应用这些值。

但是，如果你真的想要一个创造性的方式来做到这一点，只能从可以打印到HTML并因此与JavaScript交互的CSS文件做到这一点，那么使用不会影响设计的有效属性呢？

所有你真正做的是存储在HTML字符串，那么你可以使用一个默默无闻的元素，如计数器复位，然后通过jquery.css抢值（）

variables.less: @bkpoint = 500; 
css: 
#any-div { 
    counter-reset: break-point @bkpoint; 
} 
jquery: 
$('#any-div').css('counter-reset'); // returns: 'break-point 500'

简单正则表达式函数让你摆脱返回的字符串的“断点”部分，并且你已经找到了你想要的东西。顺便说一句，不能使用做任何其他的CSS属性，比如：如果在计数器复位

border-width: @bkpoint; 
border: none;

规格你感兴趣： http://www.w3.org/TR/CSS2/generate.html#propdef-counter-reset

来源

2013-09-01 15:51:26 DMTintner

使用计数器重置很聪明，但不知道跨浏览器的效果如何。在'：after'伪元素上使用content属性（使用'display：none'）在我的测试中非常强大：http://stackoverflow.com/a/18457684/557612 – steveax

@steveax，这正是我试图实现，但我不知道如何获得：与js后的伪元素。你的链接很完美https://coderwall.com/p/_ldtkg –

@steveax真的很喜欢你的coderwall例子。非常不错的除了响应式设计。只有关于调用js的伪元素的评论是，在复杂的布局/架构中，您实际上也会应用一些数据属性。并且（据我所知）这些只能应用于元素而不应用于伪元素，如果可以定位相同的元素，则会更容易。此外，计数器复位是CSS级别2，并具有非常高的浏览器支持，包括IE8。但是，就像我在答案中所说的那样，只要不影响布局，您可以在任何属性上执行此操作。 – DMTintner

使用元素上的css属性内容来为javascript异常存储信息

回答

相关问题