Menu
The following code fails in Chrome, Safari, works fine in Firefox
"use strict";
document.body.style = "background-color: green;";<p>background should be green</p>Remove the "using strict" and it works.
Is that a bug in Chrome and Safari or a bug in Firefox? MDN says setting the style is valid.
651
To resolve the "Cannot read property 'style' of null" error, make sure that the DOM element you're accessing the style property on exists. In the example, an element with the provided id does not exist in the DOM, so the getElementById method returns null .
The "Cannot read property 'click' of null" error occurs when trying to call the click method on a null value. To solve the error, run the JS script after the DOM elements are available and make sure you only call the method on valid DOM elements.
To solve the "Cannot read properties of undefined" error, make sure that the DOM element you are accessing exists. The error is often thrown when trying to access a property at a non-existent index after using the getElementsByClassName() method. Copied! const boxes = document.
This error TypeError: document. getelementbyid(...) is null would seem to indicate that there is no such element with an ID passed to getElementById() exist. This can happen if the JavaScript code is executed before the page is fully loaded, so its not able to find the element.
Problem
Not all browsers support assigning assigning a string which contains a textual representation of a CSS declaration block to the style property.
element.style = styleString; // Might not work
Workaround
As a workaround, you can set it as a content attribute, or to the cssText property:
element.setAttribute('style', styleString);
element.style.cssText = styleString;
Standard behavior
On older browsers compliant with DOM L2 Style and ES5, the assignment should
On newer browsers compliant with CSSOM and ES5, the assignment should
Full details
According to the DOM Level 2 Style spec, the style property is defined in the ElementCSSInlineStyle interface as follows:
interface ElementCSSInlineStyle {
readonly attribute CSSStyleDeclaration style;
};
Therefore, the style property should be implemented as an accessor property with a getter but without a setter.
Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'style'); /* {
configurable: true,
enumerable: true,
get: function(){...},
set: undefined
} */
According to ECMAScript 5, when you attempt to assign some value to a property like that, an error must be thrown in strict mode:
When an assignment occurs within strict mode code, [...] the LeftHandSide also may not be a reference [...] to an accessor property with the attribute value {[[Set]]:undefined} [...]. In these cases a TypeError exception is thrown.
However, DOM L2 Style is superseded by the newer CSS Object Model (CSSOM).
According to the that spec, the style IDL attribute of the interface ElementCSSInlineStyle, implemented by HTMLElement, is defined as a [PutForwards] extended attribute:
[NoInterfaceObject]
interface ElementCSSInlineStyle {
[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};That means that setting the style property must behave like setting the cssText one of the CSSStyleDeclaration. Therefore, those must be equivalent:
element.style = styleString;
element.style.cssText = styleString;
And that's why it works on newer browsers.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
