Using HTML Attributes as CSS Property Values

Get value of attribute in CSS

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

Setting html tag attributes from css

To help determine if you're writing valid CSS rules with concern for attributes, you can find a list of HTML attributes here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

Technically, you never set any HTML attribute with CSS. HTML attributes are used to configure aspects of an element's functionality, not style (though there is some stylistic crossover discussed later). Attributes are set inline or through JavaScript and can be used as selectors in CSS to style elements, but their values are never changed or affected by CSS.

The difference is that, in CSS, you are declaring the value of style properties as opposed to element functionality. In fact, style is a global attribute of HTML elements that accepts a value of inline CSS rules and functions by applying those styles. Even with pseudo-classes like input:checked { color: red; }, the CSS does not cause the input element to be checked. Rather, it adds a red value of the color property to any input element that is checked (for instance, explicitly with an attribute on the html: <input checked />.

Likewise, in your example [draggable=true]{ property: value; } you are not changing the functionality of any element to be draggable. Instead, you are selecting any element that has a defined draggable attribute and adding style properties to it via the CSS declaration.

Whereas in your example div { draggable: true; } you are attempting to set divs to have a true style of draggable which doesn't work because draggable is not a style property.

There are some legacy attributes whose functionality affects style and appear to be the same as CSS properties (i.e. width, height, color). These are the ones that likely cause the confusion between style properties and element attributes as they do blur the line.

How can I use the HTML data attribute in CSS as a property?

Support would depend on the given browser's implementation. If it's not working, then it's not currently supported.

According to MDN, support for properties other than content is experimental:

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

Is the CSS [attribute=value] Selector unnecessary?

The * in [class*='example'] is a selector that retrieves all elements that contains example in the class-name and not just elements with the class-name example.

So [class*='example'] will target all of the following:

<div class="iamanexample"></div>
<div class="example"></div>
<div class="whereisyourexample"></div>

Whereas .example or [class='example'] will only target the second element <div class="example"></div> from the above three.

---

Other attribute selectors in CSS includes the:

~ selector: This selector retrieves all elements whose targeted attribute's value contains the exact queried value. This selector can include multiple values in the form of a whitespace-separated list of words.

| selector: This selector retrieves all elements whose targeted attribute's value is exactly the queried value or begins with queried value immediately followed by a hyphen.

^ selector: This selector retrieves all elements whose targeted attribute's value starts with the queried value.

$ selector: This selector retrieves all elements whose targeted attribute's value ends with the queried value.

---

Check and run the following Code Snippet for a practical example and explanation in the code comments on how each of the above selector works:

/* all elements whose abc value contains "ment" */div[abc*="ment"] { font-weight: 700; }
/* all elements whose abc value is exactly "element-1" */div[abc~="element-1"] { color: blue; }
/* all elements whose abc value is exactly "element" or begins with "element" immediately followed by a hyphen */div[abc|="element"] { background-color: green; }
/* all elements whose abc value starts with "x" */div[abc^="x"] { background-color: red; }
/* all elements whose abc value ends with "x" */div[abc$="x"] { background-color: yellow; }
div { margin: 5px 0px; }

<div abc="element-1">Hello World!</div><div abc="element-2">Hello World!</div>
<div abc="xElement1">Hello World!</div><div abc="xElement2">Hello World!</div>
<div abc="element1x">Hello World!</div><div abc="element2x">Hello World!</div>

Get Each and Every CSS Property and HTML Attribute for a Given Element

You can use the getComputedStyle() method of the document object and the attributes field of the element:

var oDiv = document.getElementById("div1");
var css = document.defaultView.getComputedStyle(oDiv, null);
var attr = oDiv.attributes;

This should return an object with fields for each CSS style the element has. You can then write a simple, depth-first tree-walk to iterate over every element in the DOM (I wrote this with jQuery to make it easy to follow):

var stack = new Array();
stack.push($('html')[0]);
var i = 0;
while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
}

Note that I put a counter (i) in there to limit the number of iterations to 100 and keep you from blowing up your browser if your page has a ton of elements. You can remove this if you want, but be careful. Also note that the root of your search can be any node in the DOM, but I started with the html tag.

Based on your comments, I'm going to walk through how you would implement this. Keep in mind that all it does is print the CSS/attribute object to the console, you will need to modify that part to do what you actually want it to.

Script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
  var stack = new Array();
  stack.push($('html')[0]);
  var i = 0;
  while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
  }        
}
</script>

HTML Button to run it

<button type="button" onclick="doStuff()">Click Me!</button>

Full implementation

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function doStuff(){
  var stack = new Array();
  stack.push($('html')[0]);
  var i = 0;
  while(stack.length > 0 && i < 100){
    //pop the next element off the stack
    var ele = stack.pop();

    var css = document.defaultView.getComputedStyle(ele, null);
    var attr = ele.attributes;

    //do things with the css object
    console.log(css);

    //do things with the attributes
    console.log(attr);

    //add children to the stack
    $(ele).children().each(function(index, child){
        stack.push(child);
    });
    i++;
  }        
}
</script>
</head>
<body>
  <button type="button" onclick="doStuff()">Click Me!</button>
</body>
</html>

I'd be interested to hear what you're trying to accomplish with this. This is a slow operation, and there's not usually much benefit to examining the tags that you put on the page...

---

Related Topics