Home > Web Front-end > JS Tutorial > The principle of using javascript getComputedStyle to get and set style_javascript skills

The principle of using javascript getComputedStyle to get and set style_javascript skills

WBOY
Release: 2016-05-16 18:59:58
Original
990 people have browsed it

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";

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template