Shulou(Shulou.com)05/31 Report--

This article mainly introduces JavaScript how to obtain elements of the final background-color related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this JavaScript how to obtain elements of the final background-color article will have a harvest, let's take a look.

I. title

Use JS code to find the final background-color of an element on the page, regardless of the IE browser and the float of the element.

Second, topic analysis

1. Examine the underlying JavaScript foundation

Front-end development, the daily most common contact is the preparation of page style. Getting rid of tool libraries such as jQuery and getting styles with native js is a skill that every front-end programmer must master in the advanced stage.

two。 Examine the interviewer's meticulous thinking and development experience

If you think that just looking for the calculated style of the element, it's a bit too young. The complexity of the style of the page is always the most abusive. No matter how powerful the front end is, no one will be upset when they hear about compatible IE6. So consider a special case: the value of display,opacity,visibility.

III. Theoretical basis

1. Inline style

The inline style can be obtained through the element's style attribute, and if the style attribute has a background-color value, it can be obtained directly (forget about! important for the time being).

two。 Cascading style of outreach

The DOM2 style specification includes a getComputedStyle () method in document.defaultView. This method returns a read-only CSSStyleDeclaration object that contains all the calculation styles for a particular element.

Fourth, solve the problem

4.1Encapsulation of all utility methods in the WDS (wall dom script) namespace

(function (WDS, undefined) {/ / Encapsulation Code.}) (window.WDS | | (window.WDS = {}))

The code is encapsulated in a namespace and does not inadvertently cause code contamination.

4.2 tool method camelize

/ / convert string to hump writing function camelize (str) {return str.replace (/-(\ w) / g, function (strMatch, p1) {return p1.toUpperCase ();});}

This method is independent in order to facilitate the writing of the subsequent getStyle () method.

The function is to convert the css attribute value of the hyphen class into hump writing.

For example: convert background-color to backgroundColor

4.3 get the calculation style for a specific element

/ / get the calculated style function getStyle (elem, property) {if (! elem | |! property) {return false;} var value = elem.style [camelize (property)], / / get whether there is an inline style css first / / all calculation styles obtained / / No inline style, get the cascading style sheet calculated style if (! value) {if (document.defaultView & & document.defaultView.getComputedStyle) {css = document.defaultView.getComputedStyle (elem, null); value = css? Css.getPropertyValue (property): null;}} return value;}

To achieve this step, the first observation site is basically satisfied. You can also know whether the interviewer has a solid js foundation.

In addition, such as if (! elem | |! property) and function sniffing if (document.defaultView & & document.defaultView.getComputedStyle) can well reflect the code logic and development experience of developers.

4.4 exclusion of special circumstances

/ / check whether the acquired background color is valid function checkBgValue (elem) {var value = getStyle (elem, 'background-color'), hasColor = value? True: false; / / whether there is color / / exclude special cases if (value = = "transparent" | | value = = "rgba (0,0,0,0)") {/ / No background-color is set, or set to follow the parent node hasColor = false;} else if (getStyle (elem, 'opacity') = "0") {/ / dom node transparency is fully transparent hasColor = false } else if (getStyle (elem, 'visibility') = = "hidden") {/ / dom node invisible hasColor = false;} else if (getStyle (elem,' display') = = "none") {/ / dom node invisible hasColor = false;} return hasColor;}

4.5 get the final color of the div displayed on the page

/ / get the final color function getRealBg (elem) {if (checkBgValue (elem)) {return getStyle (elem, 'background-color');} else if (elem! = document.documentElement) {return getRealBg (Elm [XSS _ clean]);} return';}

Getting the style value is handled recursively.

If the element style is successfully obtained and 4.4 is not triggered to exclude one of the special cases, the result is returned directly.

If a special case is triggered, you need to find the style of the parent node and the upper node to get the background-color value that is visible to the naked eye and displayed on the page.

During the backtracking process, if you have already traced back to the html root node, you can stop the backtracking. So judge else if (elem! = document.documentElement) is added.

5. Missing large boss

5.1Big boss! important

If misused! important, the maintenance and development of large projects is definitely a nightmare. Because of the calculation of priority rules, important is always at the top of the food chain.

If this situation is not considered in the current topic, it is also my laziness. It's really tricky, so don't write the code for this logical branch. Here is a reminder ~

5.2 large boss parent node and root node set invisible css attribute

As long as you set the css statement: html {display:none;}, all the elements of the page disappear immediately. On the other hand, for the superior node of any particular element, as long as opacity,display,visibility is set, the judgment logic becomes complicated instantly. So, I won't get involved in O (∩ _ ∩) O .

VI. Points for improvement

In fact, I didn't do my best when it comes to the exclusion of special circumstances-there is no uniform conversion between rgb color values and specific color values (such as red), but a blunt judgment if (value = = "transparent" | | value = = "rgba (0,0,0,0)").

This is the end of the article on "how JavaScript gets the final background-color of elements". Thank you for reading! I believe you all have a certain understanding of "how JavaScript obtains the final background-color of elements". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.