Is there something like data-* attributes for css?

I want to pass a value that's set in a stylesheet so it can be read by javascript/jQuery? I thought of creating an invisible element and giving it a value, but then I would have to include that element in all the pages, which is pretty hacky. Just want to know if there's an alternative to that.

I have a js resize script for images that resizes based on area instead of height or width, so I can't feed it a maxwidth or maxheight, per se. if you give it 100, it makes the area of an image = 100开发者_Python百科^2. I suppose I could set the maxWidth of the element to twice the number I want, but I'm just wondering if there's a classier way to pull it off.

As far as I know, browsers throw away attributes they don't understand, so unfortunately you can't just inject your own data-*. I think you might have to do it via a hidden element, something like below, which uses the content attribute:

# styles.css
.data {
  display: none;
  content: "my data variable"
}

# index.html
<span class="data"></span>


# javascript
myData = $(".data").css('content')

Update

Playing around in Chrome, it looks like you can set the 'content' of an image and it won't show up. So you could do

# styles.css
img {
  content: "100"
}

Not sure how well that works cross browser though, also looking at the w3c spec, it says that 'content' has to be used with :before or :after, so not sure if you'll run into validation issues there.

Why not just use javascript to query the actual element, and read its properties that way? Then you don't rely on the CSS at all.

$('someDiv').getWidth()