Csssytledeclaration setproperty example

files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md

@@ -32,7 +32,7 @@ body {
 ```
 
 ```js live-sample___modify-rule
-const stylesheet = document.styleSheets[1];
+const stylesheet = document.styleSheets[0];
 stylesheet.cssRules[0].style.backgroundColor = "cornflowerblue";
 ```
 

files/en-us/web/api/csslayerblockrule/index.md

@@ -44,9 +44,7 @@ _Inherits methods from its ancestors {{domxref("CSSGroupingRule")}} and {{domxre
 
 ```js
 const item = document.getElementsByTagName("p")[0];
-const rules = document.styleSheets[1].cssRules;
-// Note that stylesheet #1 is the stylesheet associated with this embedded example,
-// while stylesheet #0 is the stylesheet associated with the whole MDN page
+const rules = document.styleSheets[0].cssRules;
 
 const layer = rules[0]; // A CSSLayerBlockRule
 

files/en-us/web/api/csslayerblockrule/name/index.md

@@ -47,9 +47,7 @@ output {
 ```js
 const item1 = document.getElementsByTagName("output")[0];
 const item2 = document.getElementsByTagName("output")[1];
-const rules = document.styleSheets[1].cssRules;
-// Note that stylesheet #1 is the stylesheet associated with this embedded example,
-// while stylesheet #0 is the stylesheet associated with the whole MDN page
+const rules = document.styleSheets[0].cssRules;
 
 const layer = rules[1]; // A CSSLayerBlockRule
 const anonymous = rules[2]; // An anonymous CSSLayerBlockRule

files/en-us/web/api/csslayerstatementrule/index.md

@@ -38,9 +38,7 @@ _Also inherits properties from its parent interface, {{DOMxRef("CSSRule")}}._
 
 ```js
 const item = document.getElementsByTagName("p")[0];
-const rules = document.styleSheets[1].cssRules;
-// Note that stylesheet #1 is the stylesheet associated with this embedded example,
-// while stylesheet #0 is the stylesheet associated with the whole MDN page
+const rules = document.styleSheets[0].cssRules;
 
 const layer = rules[0]; // A CSSLayerStatementRule
 

files/en-us/web/api/csslayerstatementrule/namelist/index.md

@@ -38,9 +38,7 @@ A {{jsxref("Array")}} of strings, each representing a cascade layer represented
 
 ```js
 const item = document.getElementsByTagName("div")[0];
-const rules = document.styleSheets[1].cssRules;
-// Note that stylesheet #1 is the stylesheet associated with this embedded example,
-// while stylesheet #0 is the stylesheet associated with the whole MDN page
+const rules = document.styleSheets[0].cssRules;
 
 const layerStatementRule = rules[0]; // A CSSLayerStatementRule
 const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.

files/en-us/web/api/csspagedescriptors/index.md

@@ -109,7 +109,7 @@ if (typeof window.CSSPageDescriptors === "undefined") {
   log("CSSPageDescriptors is not supported on this browser.");
 } else {
   // Get stylesheets for example and then get its cssRules
-  const myRules = document.styleSheets[1].cssRules;
+  const myRules = document.styleSheets[0].cssRules;
   for (let i = 0; i < myRules.length; i++) {
     if (myRules[i] instanceof CSSPageRule) {
       log(`${myRules[i].style}`);

files/en-us/web/api/csspagerule/style/index.md

@@ -63,11 +63,10 @@ This allows us to see how the properties map in the Web API object.
 
 #### 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).
+The code first gets the document stylesheet at index `0`, and then gets the `cssRules` defined in that stylesheet.
 
 ```js
-const myRules = document.styleSheets[1].cssRules;
+const myRules = document.styleSheets[0].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.

files/en-us/web/api/cssstyledeclaration/setproperty/index.md

@@ -8,9 +8,7 @@ browser-compat: api.CSSStyleDeclaration.setProperty
 
 {{ APIRef("CSSOM") }}
 
-The
-**`CSSStyleDeclaration.setProperty()`** method interface sets
-a new value for a property on a CSS style declaration object.
+The **`setProperty()`** method of the {{domxref("CSSStyleDeclaration")}} interface sets a new value for a property on a CSS style declaration object.
 
 ## Syntax
 
@@ -24,13 +22,17 @@ setProperty(propertyName, value, priority)
 - `propertyName`
   - : A string representing the CSS property name (hyphen case) to be modified.
 - `value` {{optional_inline}}
-  - : A string containing the new property value. If not specified, treated
-    as the empty string. A [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null) value is treated the same as the empty string (`""`).
+
+  - : A string containing the new property value. If not specified, treated as the empty string.
+    A [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null) value is treated the same as the empty string (`""`).
+
     > **Note:** `value` must not contain `"!important"`, that should be set using the `priority` parameter.
+
 - `priority` {{optional_inline}}
 
-  - : A string allowing the "important" CSS priority to be set. If not
-    specified, treated as the empty string. The following values are accepted:
+  - : A string allowing the "important" CSS priority to be set.
+    If not specified, treated as the empty string.
+    The following values are accepted:
 
     - String value `"important"`
     - Keyword `undefined`
@@ -47,34 +49,23 @@ None ({{jsxref("undefined")}}).
 
 ## Alternative usage
 
-If `priority` can be omitted, JavaScript has a special simpler
-syntax for setting a CSS property on a style declaration object:
+If `priority` can be omitted, JavaScript has a special simpler syntax for setting a CSS property on a style declaration object:
 
 ```js
 style.cssPropertyName = "value";
 ```
 
 ## Examples
 
-In this example we have three buttons, which can be pressed to dynamically alter our
-box paragraph's border, background color, and text color to random values (see the live
-example at the end of this section).
-
-We know that the rule we want to alter to do this is contained inside the second
-stylesheet applied to the page, so we grab a reference to it using
-[`document.styleSheets[1]`](/en-US/docs/Web/API/Document/styleSheets).
-We then loop through the different rules contained inside the stylesheet, which are
-contained in the array found at
-[`stylesheet.cssRules`](/en-US/docs/Web/API/CSSStyleSheet/cssRules);
-for each one, we check whether its
-[`CSSStyleRule.selectorText`](/en-US/docs/Web/API/CSSStyleRule/selectorText)
-property is equal to the selector `.box p`, which indicates it is the one we
-want.
-
-If so, we store a reference to this `CSSStyleRule` object in a variable. We
-then use three functions to generate random values for the properties in question, and
-update the rule with these values. In each case, this is done with the
-`setProperty()` method, for example `boxParaRule.style.setProperty('border', newBorder);`.
+In this example we have three buttons, which can be pressed to dynamically alter our box paragraph's border, background color, and text color to random values (see the live example at the end of this section).
+
+We know that the rule we want to alter to do this is contained inside the first stylesheet applied to the page (actually the frame in which this example is rendered), so we grab a reference to it using [`document.styleSheets[0]`](/en-US/docs/Web/API/Document/styleSheets).
+We then loop through the different rules contained inside the stylesheet, which are contained in the array found at [`stylesheet.cssRules`](/en-US/docs/Web/API/CSSStyleSheet/cssRules);
+for each one, we check whether its [`CSSStyleRule.selectorText`](/en-US/docs/Web/API/CSSStyleRule/selectorText) property is equal to the selector `.box p`, which indicates it is the one we want.
+
+If so, we store a reference to this `CSSStyleRule` object in a variable.
+We then use three functions to generate random values for the properties in question, and update the rule with these values.
+In each case, this is done with the `setProperty()` method, for example `boxParaRule.style.setProperty('border', newBorder);`.
 
 ### HTML
 
@@ -157,7 +148,7 @@ function randomColor() {
   return `rgb(${random(0, 255)} ${random(0, 255)} ${random(0, 255)})`;
 }
 
-const stylesheet = document.styleSheets[1];
+const stylesheet = document.styleSheets[0];
 const boxParaRule = [...stylesheet.cssRules].find(
   (r) => r.selectorText === ".box p",
 );