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

实际上，没有理由这样做-HTML是为了结构，CSS是为了样式，JS是为了交互。如果有必要的话，你应该把数据存储在JavaScript中的一个单独的全局变量中，或者使用jQuery：

• • HTML格式**

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

• • JS**

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中定义所有函数，或者从脚本中设置所有样式。这是不好的做法，会使代码不可维护，有缺陷，不可靠。千万不要这样做!

您可能不应该将数据绑定到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);

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

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

您可以使用content属性来达成此目的，因为它只会影响:before或:after之类的虚拟元素，而不会影响其他项目：

body {
    content: 'Hello World';
}

我无法想象任何可能的用例，但这可能是一个无害的解决方案。