HTMLElement.style | JavaScript add style
Thestylepropertyisnotusefulforcompletelylearningaboutthestylesappliedontheelement,sinceitrepresentsonlytheCSSdeclarationssetintheelementsinlinestyleattribute,notthosethatcomefromstyleruleselsewhere,suchasstylerulesinthe
[1]section,orexternalstylesheets.TogetthevaluesofallCSSpropertiesforanelementyoushoulduseWindow.getComputedStyle()[2]instead.ThefollowingcodesnippetdemonstratesthedifferencebetweenthevaluesobtainedusingtheelementsstylepropertyandthatobtainedusingthegetComputedStyle...The style property is not useful for completely learning about the styles applied on the element, since it represents only the CSS declarations set in the elements inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head>[1] section, or external style sheets. To get the values of all CSS properties for an element you should use Window.getComputedStyle()[2] instead.
The following code snippet demonstrates the difference between the values obtained using the elements style property and that obtained using the getComputedStyle() method:
<!DOCTYPE html> <html lang="en-US"> <body style="font-weight:bold;"> <div style="color:red" id="myElement">..</div> </body> </html> const element = document.getElementById("myElement"); let out = ""; const elementStyle = element.style; const computedStyle = window.getComputedStyle(element, null); for (const prop in elementStyle) { if (O...