-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
108 lines (81 loc) · 2.86 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
---
title: "Window: getDefaultComputedStyle() method"
short-title: getDefaultComputedStyle()
slug: Web/API/Window/getDefaultComputedStyle
page-type: web-api-instance-method
status:
- non-standard
browser-compat: api.Window.getDefaultComputedStyle
---
{{APIRef("CSSOM")}}{{Non-standard_Header}}
The **`getDefaultComputedStyle()`** method gives the default [computed values](/en-US/docs/Web/CSS/computed_value) of all the CSS
properties of an element, ignoring author styling. That is, only user-agent and user
styles are taken into account.
## Syntax
```js-nolint
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)
```
### Parameters
- `element`
- : The {{domxref("Element")}} for which to get the computed style.
- `pseudoElt` {{optional_inline}}
- : A string specifying the pseudo-element to match. Must be `null` (or not
specified) for regular elements.
### Return value
The returned `style` is a [`CSSStyleDeclaration`](/en-US/docs/Web/API/CSSStyleDeclaration)
object. The object is of the same type as the object returned by
{{domxref("Window.getComputedStyle()")}}, but only takes into account user-agent and
user rules.
## Examples
### Simple example
```js
const elem1 = document.getElementById("elemId");
const style = window.getDefaultComputedStyle(elem1);
```
### Longer example
```html
<style>
#elem-container {
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
</style>
<div id="elem-container">dummy</div>
<div id="output"></div>
<script>
const elem = document.getElementById("elem-container");
const theCSSprop = window.getDefaultComputedStyle(elem).position;
document.getElementById("output").innerHTML = theCSSprop; // Will output "static"
</script>
```
### Use with pseudo-elements
The `getDefaultComputedStyle()` method can pull style info from
pseudo-elements (e.g., {{cssxref("::before")}} or {{cssxref("::after")}}).
```html
<style>
h3:after {
content: " rocks!";
}
</style>
<h3>generated content</h3>
<script>
const h3 = document.querySelector("h3");
const result = getDefaultComputedStyle(h3, ":after").content;
console.log("the generated content is: ", result); // returns 'none'
</script>
```
## Notes
The returned value is, in certain known cases, expressly incorrect by deliberate
intent. In particular, to avoid the so called CSS History Leak security issue, browsers
may expressly "lie" about the used value for a link and always return values as if a
user has never visited the linked site, and/or limit the styles that can be applied
using the `:visited` pseudo-selector. See <https://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/>
and <https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/>
for details of the examples of how this is implemented.
## Specifications
Proposed to the CSS working group.
## Browser compatibility
{{Compat}}