定义和访问HTML元素的costum属性

Question

In a web project, technical business-related values have to be attached to specific elements. Based on those values, decisions are to be made on the client side. One big advantage of this approach, were it possible, is that CSSs in my case are automatically generated from other formats (provided by the management).

I am trying to add my own properties to some CSS classes. I have a css class like:

.className{
SomeProp: ThisIsTheValue;
}

In Javascript, I need to access this value. I tried things like:

myVar.SomeProp
myVar["SomeProp"]

All returned null. Is there a way I can just read this value? Is that possible to add my own CSS properties?

Answer 1

You can use the getComputedStyle() method in standard JavaScript:

Example

var element = document.getElementById('name'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');

You can use the top variable however you please, such as in the example it outputs in an alert.

Answer 2

SomeProp is not a valid css property. Use a different approach to achieve what you are trying to accomplish.

---

The value can be stored at css as JSON , within css comment. Parse the .textContent of style element to retrieve value as javascript object.

 /*{"className":{"SomeProp": "ThisIsTheValue"}}*/ 

 <script> var styles = document.styleSheets[0].ownerNode; var obj = JSON.parse( styles.textContent .match(/(\\/\\*{.*})(?=\\*\\/)/)[0] .replace(/[/*]/g, "") .trim() ); console.log(obj["className"]["SomeProp"]) </script> 

---

Answer 3

You can't do this through CSS. The browser will only read the CSS properies that it knows and ignore the rest. You can't read them from JavaScript in any practical way. And you shouldn't, because CSS if for styling, not for business logic.

You can however use custom HTML attributes. Using data*-attributes you can store extra information in an HTML element and read it from JavaScript to use it in any way you like. Mozilla has some good documentation on the subject.