是否有任何对其元素没有影响的 CSS 属性？答案

【问题标题】：Are there any CSS properties that have no effect on their element?是否有任何对其元素没有影响的 CSS 属性？
【发布时间】：2014-01-04 02:54:38
【问题描述】：

HTML 具有用于存储的data-* 属性，根据定义对元素的布局或呈现没有影响。 CSS有这样的东西吗？

这是一个例子（它实际上并没有用，只是我想要的想法）：

<style type="text/css">
#foo { data-bar: 'hello world'; }
</style>

<div id="foo">i'm an element</div>

<script type="text/javascript">
var element = document.getElementById('foo'),
style = window.getComputedStyle(element),
data_bar = style.getPropertyValue('data-bar');
console.log(data_bar);
</script>

如果没有，是否有任何CSS properties 可以更改为任意值且不影响任何匹配元素？

编辑：我知道这不是 CSS 的用途，而且肯定有更好的方法来实现这一点 - 但我想知道这是否可能。

【问题讨论】：

你为什么需要它？ css 是用于样式的，而不是用于数据的，你能给出一个用例吗？也许你需要别的东西
所有 CSS 属性都有作用，但有些需要设置特定的元素类型或其他样式。例如，top、left、right 等不起作用，除非元素被定位，list-style 或 table-layout 需要某些元素才能工作等。其中大多数需要一定的输入，你不能写任何你喜欢的东西作为价值，但话又说回来，你似乎不应该做你想做的任何事情。
这取决于应用于该元素的其他属性之间的交互，以及它具有哪些子元素以及它们的属性是什么。例如，当元素没有内联显示子元素时，在元素上设置 text-align:center 无效。就像 jm0 说的那样，如果你不是只谈论有效的属性（在浏览器之间有所不同......），任何被 CSS 解析器确定为无效的属性都会被忽略，无论是属性名称还是该属性的值。
你不能只添加 cmets 来定义 CSS 的含义吗？
很抱歉碰到一个旧线程和评论，但我认为问题是有效的。使用示例，我们有一个绑定到元素的事件侦听器，但我们希望根据它是否是移动设备来执行不同的功能。我不想将任何移动检测/用户代理嗅探脚本添加到负载中，并且最简单的方法是检查我是否可以在 CSS 中添加一个标志/属性，我可以在 Javascript 中选择它以确定我的逻辑正在使用。话虽如此，content 属性在某些情况下可以用于此目的。

标签： javascript css

【解决方案1】：

您可以在一些未使用的属性中编写无效的 css，大多数浏览器会忽略它，但它仍然应该可以通过 javascript 检索。也就是说，我永远不会这样做。

【讨论】：

【解决方案2】：

没有理由这样做，真的——HTML 用于结构，CSS 用于样式，而 JS 用于交互。如果有的话，您真的应该将数据存储在 javascript 中的单独全局变量中，或者使用 jQuery：

HTML

<div id="foo">i'm an element</div>

var element = $('#foo'); // select element
element.data("bar","hello-world"); // store data for the element
var data_bar = element.data("bar"); // get data
console.log(data_bar); // prints "hello-world"

这种方法会得到更多支持，并且不太可能意外搞砸。有关详细信息，请参阅this documentation。如果您愿意，您可以尝试使用其他库或其他方式使用 JS，但我不建议将 CSS 用于数据 - 即使它看起来有点像 JSON，存储不是它的设计目的.

编辑：如果您只是好奇（尽管您绝对不应该这样做），您可能会错误地将数据存储在某些未使用的 CSS 属性，并希望浏览器忽略错误，正如jm0 所说。但是，这可能会导致一些无法预料的后果。

使用 CSS 进行存储就像在 HTML 中单独设置所有元素的样式，在 HTML 中定义所有函数，或者通过脚本设置所有样式。这是不好的做法，并且会使您的代码难以维护、有缺陷且不可靠。只是不要这样做！

【讨论】：

【解决方案3】：

您可以在 CSS 和 jQuery 中使用 role="whatever" 而不影响布局。

【讨论】：

【解决方案4】：

您可能不应该将数据绑定到 DOM，因为这会导致无法管理的代码。 DOM 应该主要用于演示或用户输入。

但是，最好的方法可能是使用 jQuery 的$.data()。

var $foo = $('#foo');
$foo.data('bar', 'Hello World!');
alert($foo.data('bar'));

另一种实现方式（可以避免绑定数据）是将程序结构分离为模型和视图。

// Handles business logic.
function Greeter(greeting) {
  this.greeting = greeting;
  this.timesGreeted = 0;
}

Greeter.prototype.formatGreeting = function() {
  return this.greeting + " for the " + (this.timesGreeted++) + "th time!";
};

// Handles user interactions.
function GreeterView(model, element) {
  this.model = model;
  this.element = element;
  var self = this;
  this.element.addEventListener('click', function() {
    self.sayHello();
  }, false);
}

GreeterView.prototype.sayHello = function() {
  alert(this.model.formatGreeting());
};

var greeter = new Greeter('Hello World!');
var el = document.getElementById('greeter-element');
var greeterView = new GreeterView(greeter, el);

Fiddle.

如果您对模型视图实现感兴趣，请查看Backbone.js。 Model-View 方法的组织优势远远超过 $.data() 或类似技巧的感知便利。

【讨论】：