0

I know we can get all the styles applied to an element using window.getComputedStyle() but the problem I am facing is that it converts different units to px. I want to fetch all the styles just like they appear in the style tab of the dev tool.

For example, It converts the line-height of 1.2 to 57.6px but I need 1.2. Is there a way to achieve that using pure JavaScript I am using React so I don't want to use jQuery.

I already went through this question. The accepted answer suggests that one should use computedStyleMap but this method does not work on every browser another answer suggests using getMatchedCSSRules but now getMatchedCSSRules function is not available, it is removed.

halfer
  • 19,824
  • 17
  • 99
  • 186
Alqama Bin Sadiq
  • 358
  • 1
  • 4
  • 17
  • *"I already went through this question. The accepted answer suggests that one should use `getMatchedCSSRules`..."* No, it doesn't. The **accepted** answer there doesn't mention that method at all. – T.J. Crowder Apr 04 '20 at 12:21
  • On Stack Overflow, it's usually **really** badly received to tell people what to do when you're asking them for help. Instead of your opening meta paragraph, just list the questions you've found and say what about their answers doesn't work for you. A blanket "no trust me this isn't a duplicate" is not appropriate and, frankly, is likely to encourage downvotes and discourage help. *Show*, don't tell. – T.J. Crowder Apr 04 '20 at 12:22
  • What kind of browser support do you need? – T.J. Crowder Apr 04 '20 at 12:24
  • @T.J.Crowder The accepted answer uses `computedStyleMap ` which only works on a few browsers. The other which has more upvotes suggests using `getMatchedCSSRules`. Which is not available now. The thing is people don't even look at all the answers and mark the question as duplicate. – Alqama Bin Sadiq Apr 04 '20 at 12:26
  • I want to fetch all the styles applied to a specific element without computation and I want it working on every browser especially Safari. – Alqama Bin Sadiq Apr 04 '20 at 12:27
  • My point was that what you said in the question (about the linked question) is flatly wrong, which is unlikely to be useful in your cause to get an answer. "Every browser" is not achievable, be more specific. – T.J. Crowder Apr 04 '20 at 12:28
  • what about https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration ? – G-Cyrillus Apr 04 '20 at 12:31
  • @T.J.Crowder answer that received the bounty is explicitely about window.getMatchedCSSRules() for chrome ;) – G-Cyrillus Apr 04 '20 at 12:33
  • @G-Cyrillus style only returns inline styles, I already mentioned the problem with `getComputedStyle()` – Alqama Bin Sadiq Apr 04 '20 at 12:34
  • @T.J.Crowder I updated the question. :) – Alqama Bin Sadiq Apr 04 '20 at 12:34
  • not only inline style, see the use – G-Cyrillus Apr 04 '20 at 12:34
  • @G-Cyrillus - And **isn't** the accepted answer. – T.J. Crowder Apr 04 '20 at 12:35
  • @AlqamaBinSadiq - I've posted an answer to the question you linked. :-) – T.J. Crowder Apr 04 '20 at 13:13
  • Not sure why I didn't [link to the answer](https://stackoverflow.com/a/61028626/157247) above... :-| – T.J. Crowder Apr 04 '20 at 13:47
  • @T.J.Crowder Please check my comment on your answer. – Alqama Bin Sadiq Apr 04 '20 at 15:02

0 Answers0