1. Usage of getComputedStyle()
document.defaultView.getComputedStyle(element[,pseudo-element]); 或者 window.getComputedStyle(element[,pseudo-element]);
First, there are two parameters: the element and the pseudo-class. The second parameter is not required; when not querying pseudo-class elements, it can be omitted or null can be passed.
Usage example:
let my_div = document.getElementById("myDiv");
let style = window.getComputedStyle(my_div, null);
Regarding defaultView, here is a quote from MDN's description of defaultView:
defaultView
In many online demo codes, getComputedStyle is called through the document.defaultView object. In most cases, this is unnecessary, because it can be called directly through the window object. But there is one case where you must use defaultView: accessing styles inside a subframe (iframe) on Firefox 3.6.
Moreover, except in IE8 browsersdocument.defaultView === windowit returns false; other browsers (including IE9) return true. So just use window directly from now on, no need to input such a long code.
2. Return value
getComputedStyleThe returned object isCSSStyleDeclarationan object of the type. When getting data, you can directly access it as a property, for examplestyle.backgroundColor. Note that the key names of the returned object arecssin camelCase notation,background-color -> backgroundColor。
Note thatfloatthe float property, according to "Professional JavaScript", is a reserved keyword in JS. According to the DOM2 specification, when getting an element's float, you should use cssFloat. In fact, Chrome and Firefox support the float property, meaning it can be used directly.
var float_property = window.getComputedStyle.style; // chrome 和 Firefox支持
However, this cannot be used in any version of IE, and IE 8 only supportsstyleFloat, which will be discussed in the compatibility issue below.
3. Similarities and differences with style
getComputedStyleandelement.styleThe similarity is that both return a CSSStyleDeclaration object, both use CSS camelCase notation when getting corresponding property values, and both need to pay attention to the float property.
The differences are:
element.stylereads only the element'sinline style, i.e., the style written on the element's style attribute; whilegetComputedStylereads the final style, includinginline style、embedded styleandexternal style。element.styleIt supports both reading and writing; we can useelement.styleto rewrite the element's style. However,getComputedStyleit only supports reading and does not support writing. We can usegetComputedStyleto read styles, and useelement.styleto modify styles.
We can usegetComputedStyleto read styles, and useelement.styleto modify styles.
4. Compatibility
RegardinggetComputedStylethe compatibility issue: Chrome and Firefox support this property, and IE 9, 10, and 11 also support the same feature. IE 8 does not support this feature. What IE 8 supports is the element.currentStyle property, and the value returned by this property is basically consistent withgetComputedStylethe returned value is basically the same, except that in terms of float support, IE 8 supports styleFloat; this needs attention.
Original address: https://blog.csdn.net/s110902/article/details/73312802?locationNum=12&fps=1