-
Notifications
You must be signed in to change notification settings - Fork 22.5k
/
index.md
116 lines (87 loc) · 3.75 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
109
110
111
112
113
114
115
116
---
title: "CSSPageRule: style property"
short-title: style
slug: Web/API/CSSPageRule/style
page-type: web-api-instance-property
browser-compat: api.CSSPageRule.style
---
{{APIRef("CSSOM")}}
The **`style`** read-only property of the {{domxref("CSSPageRule")}} interface returns a {{domxref("CSSPageDescriptors")}} object.
This represents a [CSS declaration block](/en-US/docs/Web/API/CSS_Object_Model/CSS_Declaration_Block) for a CSS {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule), and exposes style information and various style-related methods and properties for the page.
## Value
A {{domxref("CSSPageDescriptors")}} object with properties that match the associated {{cssxref("@page")}} [at-rule](/en-US/docs/Web/CSS/At-rule).
> [!NOTE]
> Earlier versions of the specification defined this property as a {{domxref("CSSStyleDeclaration")}}.
> Check the compatibility data below for your browser.
## Examples
### Inspecting a page rule
This example uses the Web API to inspect the content of a {{cssxref("@page")}} rule.
```html hidden
<pre id="log"></pre>
```
```js hidden
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
```
```css hidden
#log {
height: 230px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
```
#### CSS
Below we define styles for the page using a {{cssxref("@page")}} rule.
We assign different values for each margin property using the `margin` shorthand, and also specify the `size`.
We don't set the `page-orientation`.
This allows us to see how the properties map in the Web API object.
```css
@page {
margin: 1cm 2px 3px 4px;
/* page-orientation: upright; */
size: A4;
}
```
#### JavaScript
The code first gets the document stylesheet at index `1`, and then gets the `cssRules` defined in that stylesheet.
We need to get this stylesheet because the example is embedded in a separate frame with its own sheet (index `0` is the CSS for this page).
```js
const myRules = document.styleSheets[1].cssRules;
```
We then iterate through the rules defined for the live example and match any that are of type `CSSPageRule`, as these correspond to `@page` rules.
For the matching objects we then log the `style` and all its values.
```js
for (let i = 0; i < myRules.length; i++) {
if (myRules[i] instanceof CSSPageRule) {
log(`${myRules[i].style}`);
log(`margin: ${myRules[i].style.margin}`);
// Access properties using CamelCase properties
log(`marginTop: ${myRules[i].style.marginTop}`);
log(`marginRight: ${myRules[i].style.marginRight}`);
log(`marginBottom: ${myRules[i].style.marginBottom}`);
log(`marginLeft: ${myRules[i].style.marginLeft}`);
log(`pageOrientation: ${myRules[i].style.pageOrientation}`);
// Access properties using snake-case properties
log(`margin-top: ${myRules[i].style["margin-top"]}`);
log(`margin-right: ${myRules[i].style["margin-right"]}`);
log(`margin-left: ${myRules[i].style["margin-left"]}`);
log(`margin-bottom: ${myRules[i].style["margin-bottom"]}`);
log(`page-orientation: ${myRules[i].style["page-orientation"]}`);
log(`size: ${myRules[i].style.size}`);
log("\n");
}
}
```
#### Results
The results are shown below.
Note that the object should be a `CSSPageDescriptors` to match the current specification, but may be a `CSSStyleDeclaration` in some browsers.
Note also that the corresponding values for properties in camel- and snake-case match each other and the `@page` declaration, and that `page-orientation` is the empty string `""` because it is not defined in `@page`.
{{EmbedLiveSample("Inspecting a page rule", "100%", "300px")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}