DEV Community

Sadick
Sadick

Posted on

Did you know CSS has over 400 unique properties

I didn't know either until I did this.

var element = document.createElement("div");
var count = 0;
for (var index in element.style) count++;
console.log(count); // 413
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

Collapse
mindplay profile image
Rasmus Schultz

You would need to exclude non-CSS object properties to accurately count:

var element = document.createElement("div");
var count = 0;
for (var index in element.style) {
  if (element.style.hasOwnProperty(index)) {
    count++;  
  } else {
    console.log(index); // non-CSS object properties
  }
}
console.log(count);

My browser (Chrome) has 439 ;-)

Collapse
sadick profile image
Sadick Author

Thanks, i completely overlooked the hasOwnProperty method. Nice catch 👍

Collapse
ghost profile image
Ghost

Can do instead

Object.keys(getComputedStyle(element)).length

know that some properties are only SVG related.

Collapse
martinmuzatko profile image
Martin Muzatko • Edited on

-100