WARNING 🤯: This is a new method and may not work in some browsers as of now.
To get attribute values from HTML elements to css, you can use the attr()
CSS function.
Consider this html, where you have a h1
tag with class name heading
.
<h1 class="heading">Hello World!</h1>
Now Let's style this h1
tag with some CSS.
.heading {
background-color: black;
color: red;
}
Now you may ask what's cool about this? This is just normal stuff. 🧐
What if we need to give custom background colors and text colors whenever we make another h1
tag?
This is not possible because we have already hard coded the styles in CSS.
But not anymore!! That is why we have attr()
CSS function.
The attr()
function helps us to get values from attributes of HTML elements.
Now let's rewrite our html and add custom properties called data-bgcolor
and data-textcolor
in the h1
tag.
<h1 class="heading" data-bgcolor="black" data-textcolor="red">Hello World!</h1>
Now lets use the attr()
function in CSS to the values of the custom attributes in CSS.
.heading {
background-color: attr(data-bgcolor color);
color: attr(data-textcolor color);
}
-
Here we are getting the values of both the
data-bgcolor
anddata-textcolor
custom attributes from theh1
tag to the CSS. -
The
attr()
function accepts the name of the custom attribute or native attribute name followed by a space and the unit for example,- for strings -
string
- for any kind of colors -
color
- for numbers -
number
- for strings -
In our case, we have given the unit as color
since we want to change the background-color
property and color
property.