Retrieve an Element’s Computed Background‑Color with Pure JavaScript

1. Problem

Use JavaScript to obtain the final background‑color of a page element, ignoring IE and float cases.

2. Analysis

2.1 Underlying JavaScript fundamentals

Front‑end developers must master native JavaScript methods for retrieving computed styles without relying on libraries.

2.2 Interviewers’ expectations

The task also tests the candidate’s thoroughness and experience, especially handling properties such as display, opacity, and visibility.

3. Theory

3.1 Inline styles

Inline styles are accessible via the element’s style attribute; if a background‑color is defined, it can be read directly (ignoring !important).

3.2 External cascade

The DOM2 style specification provides document.defaultView.getComputedStyle(), which returns a read‑only CSSStyleDeclaration containing all computed values for an element.

4. Implementation

4.1 Namespace encapsulation

All helper functions are placed in a WDS (Wall DOM Script) namespace to avoid global pollution.

4.2 camelize utility

Converts hyphenated CSS property names to camelCase (e.g., background-color → backgroundColor) for use in the getStyle() function.

4.3 Retrieve computed style

Uses getComputedStyle to obtain the computed value of a specific property, with safety checks such as if(!elem || !property) and feature detection

if(document.defaultView && document.defaultView.getComputedStyle)

.

4.4 Excluding special cases

Handles cases where display, opacity, or visibility affect visibility, and skips !important handling for simplicity.

4.5 Recursive color resolution

If the element’s own background‑color is transparent or undefined, the algorithm recursively climbs the DOM tree until it finds a non‑transparent ancestor or reaches the html root.

5. Common pitfalls

5.1 Ignoring !important

Using !important dramatically changes cascade priority and is omitted here for brevity.

5.2 Parent or root visibility

When a parent or the root element applies display:none, opacity, or visibility, the logic becomes more complex and is not fully covered.

6. Improvements

The current implementation does not normalize color formats (e.g., converting rgb(...) to a standard representation) and only checks for transparent or rgba(0,0,0,0). A more robust solution would include comprehensive color conversion.

7. Source code and demo

Source: https://github.com/wall-wxk/blogDemo/blob/master/2017/02/05/getStyle.html

Demo: https://wall-wxk.github.io/blogDemo/2017/02/05/getStyle.html