Are there any CSS properties that don't affect their element?

Question

HTML has attributes data-*that are stored and, by definition, do not affect the layout or presentation of an element. Is there something similar for CSS?

Here is an example (this doesn't actually work, just the idea I'm shooting):

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

If not, are there CSS properties that can be changed to arbitrary values ​​and do not affect any relevant elements?

Edit: I understand that this is not what CSS is for, and there are certain ways to solve it, but I wonder if this is possible.

Answer 1

css , , javascript. , .

Answer 2

, - 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"

, - . . . , JS, CSS , JSON, , .

: ( ), CSS , , jm0. .

CSS - HTML, HTML script. , . !

Answer 3

role="whatever" CSS jQuery, .

Answer 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.

If the implementation of Model-View intrigues you, check Backbone.js . The organizational benefits of the Model-View approach far exceed the perceived convenience of $ .data () or similar tricks.