javascript - Are there any CSS properties that have no effect on their element? - Stack Overflow

admin管理员组

文章数量:1391960

HTML has data-* attributes that are for storage and by definition have no effect on the layout or presentation of the element. Is there anything like this for CSS?

Here's an example (it doesn't actually work, just the idea I'm shooting for):

<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 any CSS properties that could be changed to arbitrary values and not affect any matching elements?

Edit: I recognize that this isn't what CSS is meant for, and there are definitely better ways of acplishing this - but I'm wondering if it's possible.

HTML has data-* attributes that are for storage and by definition have no effect on the layout or presentation of the element. Is there anything like this for CSS?

Here's an example (it doesn't actually work, just the idea I'm shooting for):

<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 any CSS properties that could be changed to arbitrary values and not affect any matching elements?

Edit: I recognize that this isn't what CSS is meant for, and there are definitely better ways of acplishing this - but I'm wondering if it's possible.

• javascript
• css

Share Improve this question Follow edited Dec 7, 2013 at 3:21 Rusty Fausak asked Dec 7, 2013 at 2:50 Rusty FausakRusty Fausak 7,54511 gold badge2929 silver badges3939 bronze badges 5

• 6 why would you need that? css is for styling, not for data, can you give a use case? maybe you need something else – arieljuod Commented Dec 7, 2013 at 2:53
• 2 All CSS properties do something, but some require a certain element type or other styles to be set. For instance, top, left, right etc. doesn't work unless the element is positioned, list-style or table-layout require certain elements to work etc. Most of these require a certain input and you can't write anything you like as the value, but then again, it seems like you shouldn't be doing whatever it is you're trying to do anyway. – adeneo Commented Dec 7, 2013 at 2:59
• 1 It depends on the interaction between the other properties applied to that element, and also what child elements it has and what their properties are. For instance, it has no effect to set text-align:center on an element when it has no inline display children. And like jm0 says, if you're not talking about only valid properties (which vary between browsers...) any property determined to be invalid by the CSS parser is ignored, whether it's the property name or the value for that property. – JAL Commented Dec 7, 2013 at 3:23
• 1 Can't you just add ments to define meaning to the CSS? – Josh Crozier Commented Dec 7, 2013 at 3:32
• Sorry for bumping up an old thread and ment, but I do think question is valid. Example of usage, we have an event listener tied to an element, but we want to execute different functions depending if it's a mobile or not. I do not want to add any mobile detection/user-agent sniffing script to the load, and easiest way to check if I can just add a flag/property in CSS which I can pick up in Javascript in order to decide on the logic I'm using. That being said content property can be used for this in some cases. – Emil Borconi Commented Oct 31, 2017 at 12:17

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can achieve this by using the content property, as it only affects pseudo-elements like :before or :after, and nothing else:

body {
    content: 'Hello World';
}

I can't imagine any possible use case, but this could be a harmless solution.

You can write invalid css in some unused property and most browsers will ignore it but it should still be retrievable through javascript. That said, I'd never ever do this.

There is no reason to do this, really- HTML is for structure, CSS is for styling, and JS is for interactivity. If anything, you should really either just store your data in a separate global variable from within javascript, or use 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 approach would be more supported and is less likely to accidently mess something up. For more information, see this documentation. If you prefer, you could try some other library or other way with JS, but I wouldn't remend using CSS for data- even though it look's sort of like JSON, storage is not what it was designed for.

Edit: If you're just curious (although you definitely shouldn't do this), you could store data incorrectly in some unused CSS property, and hope that browsers just ignore the errors, as jm0 said. However, this might cause some unforeseen consequences.

Using CSS for storage is like styling all your elements individually in HTML, defining all of your functions in HTML, or setting all your styles from a script. It's bad practice, and will make your code, unmaintainable, buggy, and unreliable. Just don't do it!

You probably shouldn't be tying your data to the DOM, as it will lead to unmanageable code. The DOM should primarily be used for presentation or user input.

However, the best way to do this would probably be with jQuery's $.data().

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

An alternative implementation (that would avoid tying up your data) would be to separate your program's structure into Models and Views.

// 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 a Model-View implementation intrigues you, check out Backbone.js. The organizational advantages of the Model-View approach far outshine the perceived convenience of $.data() or similar tricks.

You can use role="whatever" in CSS and jQuery without affecting the layout.

本文标签： javascriptAre there any CSS properties that have no effect on their elementStack Overflow