Home >Web Front-end >JS Tutorial >The principle of using javascript getComputedStyle to get and set style_javascript skills
Friends who are interested can just search for "Baidu popup". Someone has already given comments, which is powerful.
The most interesting thing is to use javascript to get and set style
The DOM standard introduces the concept of overriding style sheets. When we use document.getElementById("id").style.backgroundColor to get the style, what we get is just The background color set in the style attribute in id. If the background-color is not set in the style attribute in id, it will return empty. That is to say, if the id uses the class attribute to reference an external style sheet, set it in this external style sheet. The background color, so sorry, document.getElementById("id").style.backgroundColor is not easy to use. If you want to get the settings in the external style sheet, you need to use the getComputedStyle() method of the window object. The code is written like this window.getComputedStyle(id,null).backgroundColor
But the compatibility problem comes again. It works well in firefox, but not in IE.
The two compatible ways are written as
window.getComputedStyle ?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
If you are getting the background color, the return value of this method in firefox and IE is still different. In IE, it returns It looks like "#ffff99", while firefox returns "rgb(238, 44, 34) "
It is worth noting that window.getComputedStyle(id,null) cannot set the style, it can only get it, and it needs to be set You have to write something like this id.style.background="#EE2C21";