CODEWITHSUNDEEP
javascriptcss
Damon
Damon

Reputation: 10809

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

Upvotes: 0

Views: 150

Answers (2)

CambridgeMike
CambridgeMike

Reputation: 4622

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.

Upvotes: 1

Mitch Dempsey
Mitch Dempsey

Reputation: 39889

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

Upvotes: 0

Related Questions