update {HTMLElement,SVGElement,MathMLElement}.style live example (m…

…dn#31631) * update * revert * update example * fix examples * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review * fix * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: wbamberg <[email protected]> Co-authored-by: Dipika Bhattacharya <[email protected]>
OnkarRuikar · Apr 16, 2024 · 929deef · 929deef
1 parent 034ea75
commit 929deef
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/files/en-us/web/api/htmlelement/style/index.md b/files/en-us/web/api/htmlelement/style/index.md
@@ -52,17 +52,22 @@ const element = document.getElementById("elt");
 const out = document.getElementById("out");
 const elementStyle = element.style;
 
-// We loop through all styles (for…of doesn't work with CSSStyleDeclaration)
+// We loop through all the element's styles using `for...in`
 for (const prop in elementStyle) {
-  if (Object.hasOwn(elementStyle, prop)) {
+  // We check if the property belongs to the CSSStyleDeclaration instance
+  // We also ensure that the property is a numeric index (indicating an inline style)
+  if (
+    Object.hasOwn(elementStyle, prop) &&
+    !Number.isNaN(Number.parseInt(prop))
+  ) {
     out.textContent += `${
       elementStyle[prop]
     } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
   }
 }
 ```
 
-{{EmbedLiveSample("Getting_style_information", "100", "115")}}
+{{EmbedLiveSample("Getting_style_information", "100", "130")}}
 
 Note `font-weight` is not listed as a value for `elementStyle` as it is not defined within the `style` attribute of the element itself. Rather, it is inherited from the definition on its parent. Also note that the shorthand {{cssxref("border-top")}} property, defined in the `style` attribute, is not listed directly. Rather, it is replaced by the three corresponding longhand properties ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, and {{cssxref("border-top-width")}}).
 

diff --git a/files/en-us/web/api/mathmlelement/style/index.md b/files/en-us/web/api/mathmlelement/style/index.md
@@ -55,9 +55,14 @@ const element = document.querySelector(".parameter");
 const out = document.getElementById("out");
 const elementStyle = element.style;
 
-// We loop through all styles (for…of doesn't work with CSStyleDeclaration)
+// We loop through all the element's styles using `for...in`
 for (const prop in elementStyle) {
-  if (Object.hasOwn(elementStyle, prop)) {
+  // We check if the property belongs to the CSSStyleDeclaration instance
+  // We also ensure that the property is a numeric index (indicating an inline style)
+  if (
+    Object.hasOwn(elementStyle, prop) &&
+    !Number.isNaN(Number.parseInt(prop))
+  ) {
     out.textContent += `${
       elementStyle[prop]
     } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;

diff --git a/files/en-us/web/api/svgelement/style/index.md b/files/en-us/web/api/svgelement/style/index.md
@@ -59,9 +59,14 @@ const element = document.querySelector("circle");
 const out = document.getElementById("out");
 const elementStyle = element.style;
 
-// We loop through all styles (for…of doesn't work with CSStyleDeclaration)
+// We loop through all the element's styles using `for...in`
 for (const prop in elementStyle) {
-  if (Object.hasOwn(elementStyle, prop)) {
+  // We check if the property belongs to the CSSStyleDeclaration instance
+  // We also ensure that the property is a numeric index (indicating an inline style)
+  if (
+    Object.hasOwn(elementStyle, prop) &&
+    !Number.isNaN(Number.parseInt(prop))
+  ) {
     out.textContent += `${
       elementStyle[prop]
     } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;