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

HTML具有用于存储的

data-*

属性，根据定义，这些属性对元素的布局或表示没有影响。CSS有类似的功能吗

下面是一个例子（它实际上不起作用，只是我为之拍摄的想法）：

#foo{数据栏：“你好，世界”；}
我是一个元素
var element=document.getElementById（'foo'），
style=window.getComputedStyle（元素），
data_bar=style.getPropertyValue（'data-bar'）；
控制台日志（数据_栏）；

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

---

编辑：我知道这不是CSS的目的，当然有更好的方法来实现这一点，但我想知道这是否可能。

你可以在一些未使用的属性中编写无效的CSS，大多数浏览器会忽略它，但仍然可以通过javascript检索它。也就是说，我从来没有这样做过。

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

HTML

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

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

编辑：如果您只是好奇（尽管您肯定不应该这样做），您可能会在一些未使用的CSS属性中错误地存储数据，并希望浏览器忽略错误，如前所述。然而，这可能会造成一些无法预料的后果

---

使用CSS存储就像在HTML中单独设置所有元素的样式，在HTML中定义所有函数，或者从脚本中设置所有样式。这是一种不好的做法，会使您的代码无法维护、有缺陷且不可靠。别这样

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

然而，最好的方法可能是使用jQuery

另一种实现（可以避免捆绑数据）是将程序的结构分离到模型和视图中

// 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);

---

如果您对模型视图实现感兴趣，请查看。模型视图方法的组织优势远远超过了$.data（）或类似技巧的便利性。

您可以在CSS和jQuery中使用

role=“where”

，而不会影响布局。

您为什么需要它？css是样式化的，不是数据的，你能给出一个用例吗？也许您需要一些其他的东西来实现CSS属性，但有些需要设置特定的元素类型或其他样式。例如，除非元素已定位，否则top、left、right等都不起作用，列表样式或表格布局需要某些元素才能起作用等。大多数元素都需要特定的输入，并且您不能将任何您喜欢的内容写入值，但是，看起来你无论如何都不应该做任何你想做的事情。这取决于应用于该元素的其他属性之间的交互，以及它有哪些子元素以及它们的属性是什么。例如，当元素没有内联显示子元素时，在该元素上设置“文本对齐：居中”无效。正如jm0所说，如果您不是只讨论有效属性（不同浏览器之间不同…），那么CSS解析器确定为无效的任何属性都将被忽略，无论是属性名称还是该属性的值。您不能添加注释来定义CSS的含义吗？很抱歉，遇到了一个旧线程和注释，但我认为这个问题是正确的。例如，我们有一个绑定到元素的事件侦听器，但我们希望根据它是否是移动设备来执行不同的功能。我不想在加载中添加任何移动检测/用户代理嗅探脚本，这是检查是否可以在CSS中添加一个标志/属性的最简单方法，我可以在Javascript中获取该标志/属性，以便决定我正在使用的逻辑。也就是说，在某些情况下，

content

属性可以用于此目的。

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"

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);