My goal is to get all of the CSS attributes (and their corresponding values) that are being applied to a given web element at runtime. Specifically, I am coding in Java and using Selenium to run a JavaScript script to access a web element’s CSS properties. However, I am running into issues on trying to find what CSS is actually being applied to an element at runtime. Please note that (1) getting the inline styles of the element is not what I’m looking for and (2) most modern browsers have already solved this issue:

In the image highlighted above, the browser has correctly identified all of the CSS attributes that are being applied to an element at runtime. My goal is to acquire all of the non-marked out CSS attributes and their corresponding values in image provided above. I realize that browsers probably accrue this information as the web page is being compiled, but is there anyway to acquire the same information after the web page has been rendered/a live web page?

Similar questions have been asked on this topic (most notably here). However, nobody seems to have been able to produce a correct answer. The most common answer is to use getComputedStyle in some fashion. However, while doing so does find all CSS properties that are being applied to an element, it returns many, many unnecessary attributes (i.e., useless pieces of information). To illustrate my point, using getComputedStyle returns over 300 attributes on the same element as the one from my provided screenshot, when my solution should (ideally) only be 6 attributes (the attributes in blue in the screenshot). Does anybody have any insight into this problem?