How to access CSS properties on DOM object?

Asked May 24 '18 at 10:52

Active May 24 '18 at 11:11

Viewed 148 times

My element has a CSS rule applied to it giving it left: 0%. When I access that element with JS and use el.style.left, I get an empty string. When I use window.getComputedStyle(el), it gives me a pixel value. How can I access the actual "0%" that the CSS has set it to? I need to be able to read this.

I'm only using left as an example though....same goes for all the other CSS properties on the element. How can I see them?

asked May 24 '18 at 10:52

temporary_user_name

35,956
47
141
220

2

I'm afraid that this information gets lost. `el.style` only works if the rule is inside the `style` attribute. The computed value is memorized in a format that is useful for the browser, so it only returns pixels. Maybe you could read the css file. Btw I wait for other solutions – Christian Vincenzo Traina May 24 '18 at 10:58
A workaround could be getting the pixel value and compare it with the parent element's width, so you get the percentage. – Christian Vincenzo Traina May 24 '18 at 11:03
Clever idea! Might try that. – temporary_user_name May 24 '18 at 11:04
2

See https://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery – Nenad Vracar May 24 '18 at 11:04
That would make this a duplicate, I do believe. – temporary_user_name May 24 '18 at 11:07

How to access CSS properties on DOM object?

0 Answers0