Javascript:Get CSS Style Whether Inline OR Between Style Tags

Javascript Code Function to Get CSS Style Whether its an Inline OR Between Style Tags OR from an External Stylesheet

The below function will enable you to get any css style for any element regardless of how the css style is applied ...

• inline css style <p style="background:red;top:0;">
• internal style that occurs between style tags <style>p{background:red;top:0;}</style>
• external stylesheet <link rel="stylesheet" href="stylesheet.css">

/* ----------------------------------------------------------------- GET CSS STYLE FOR ELEMENT WHETHER STYLE IS INLINE STYLE, FROM A STYLE SHEET OR AN INTERNAL STYLE BETWEEN <style></style> TAGS ---------------------------------------------------------------- */ function getStyle(elem, propertyVal){ let inlinestyle = elem.style[propertyVal], computedstyle = getComputedStyle(elem).getPropertyValue(propertyVal); return (inlinestyle || computedstyle); }

Example usage:

• let borderColor = getStyle(document.querySelector('#idOfElem'), 'border');
• let backgroundColor = getStyle(document.querySelector('#idOfElem'), 'background-color');
• let top = getStyle(document.querySelector('#idOfElem'), 'top');