CODEWITHSUNDEEP
htmlcss
Amar Syla
Amar Syla

Reputation: 3653

Get value of attribute in CSS

I have this HTML code:

<div data-width="70"></div>

I want to set it's width in CSS equal to the value of data-width attribute, e.g. something like this:

div {
    width: [data-width];
}

I saw this was done somewhere, but I can't remember it. Thanks.

Upvotes: 64

Views: 119834

Answers (8)

Amar Syla
Amar Syla

Reputation: 3653

You need the attr CSS function:

div {
    width: attr(data-width);
}

The problem is that (as of 2021) it's not supported even by some of the major browsers (in my case Chrome):

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

Upvotes: 80

emre
emre

Reputation: 11

<div data-width="70"></div>

use `attr()` to get the value of attribute;

div {
    width: attr(data-width);
}

Upvotes: 0

ozgrozer
ozgrozer

Reputation: 2042

Another approach would be using CSS Custom Properties with style element to pass values from HTML to CSS.

div {
  width: var(--width);
  height: var(--height);
  background-color: var(--backgroundColor);
}
<div
  style="
    --width: 50px;
    --height: 25px;
    --backgroundColor: #ccc;
  "
></div>

<div
  style="
    --width: 100px;
    --height: 50px;
    --backgroundColor: #aaa;
  "
></div>

Upvotes: 14

Arvind
Arvind

Reputation: 70

can you try this

 $(function(){
    $( "div" ).data( "data-width" ).each(function(this) {

        $(this).width($(this..data( "data-width" )))

    });
 });

Upvotes: -3

user
user

Reputation: 25728

Inline CSS variables are almost as declarative as data attributes, and they are widely supported now, in contrast to the attr(). Check this out:

var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
  jsVar = jsVar % 5 + 1; // loop 1..5
  elem.style.setProperty("--my-var", jsVar);
}
.d1 {
  width: calc( var(--my-var) * 100px );
  background-color: orange;
}
.d2 {
  column-count: var(--my-var);
}
<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
  <div class="d1">CustomWidth</div>
  <div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>

Upvotes: 15

kunalbhat
kunalbhat

Reputation: 1719

I'm just having fun with this, but a jQuery solution would be something like this:

HTML

<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>

CSS

.foo {
  background: red;
  height: 20px;
  margin-bottom: 10px;
  width: 0; /** defaults to zero **/
}

jQuery

$(document).ready(function(){
  $('.foo').each(function(i) {
    var width = $(this).data('width');
    $(this).width(width);
  });
});

Codepen sketch here: http://cdpn.io/otdqB

KIND OF AN UPDATE Not what you're looking for, since you want to pass a variable to the width property. You might as well use a class in this case.

HTML

<div data-width='70'>Blue</div>

CSS

div[data-width='70'] {
  width: 70px;
}

Sketch here: http://cdpn.io/jKDcH

Upvotes: 1

Joren
Joren

Reputation: 3297

CSS is static styling information about specific html element and not the other way around. If you want to use CSS to set the width of your div I suggest you do with the use of classes:

HTML:

<div class="foo"></div>

CSS:

.foo {
    width: 70px;
}

jsFiddle

Upvotes: 1

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

You cant pass data attribute value directly in to css without pseudo type content. Rather you can do this way.. CHECK THIS FIDDLE

<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>

CSS

div[data-width="a"] {
    background-color: gray;
    height: 10px;
    width:70px;
}
div[data-width="b"] {
    background-color: gray;
    height: 10px;
    width:80px;
}
div[data-width="c"] {
    background-color: gray;
    height: 10px;
    width:90px;
}

Upvotes: 13

Related Questions