Given:
body = document.getElementsByTagName('body')[0];
iframe = document.createElement('iframe');
iframe.src = protocol + settings.scriptUrl + a;
iframe.height = 1;
iframe.width = 1;
iframe.scrolling = 'no';
iframe.frameborder = 0;
iframe.style = 'display:none';
body.appendChild(iframe);
I see TypeError: Attempted to assign to readonly property.
on the iframe.style =
line when testing in Safari, using strict mode.
While it might make sense to require a setter or similar for .style
, I can't seem to find any information about this being a requirement, and I can also can't find a recommendation for what I should be doing instead.
Some searching lead me to CSSStyleDeclaration.setProperty(), which may be what I want, but I'm not sure. And even if that's the right thing to do, I still haven't found any information on either which browsers support this; or how to make sure it works both with/without strict mode and in new/old browsers.
The style property returns the values of an element's style attribute. The style property returns a CSSStyleDeclaration object. The CSSStyleDeclaration object contains all inline styles properties for the element. It does not contain any style properties set in the <head> section or in any external style sheets.
Note that you can also change style of an element by getting a reference to it and then use its setAttribute method to specify the CSS property and its value. Be aware, however, that setAttribute removes all other style properties that may already have been defined in the element's style object.
You should be able to find what styles are applied by using Chrome Devtools. In Chrome, if you right click on an element and "inspect," then view the styles in the "Computed" tab then you should see what styles are affecting the element.
If you are taking that approach, you need to edit element.style.cssText
not element.style
.
From Mozillas documentation:
Styles can not be set by assigning a string to the (read only) style property, as in elt.style = "color: blue;". This is because the style attribute returns a CSSStyleDeclaration object.
Note that overwriting it will overwrite all the existing inline styles on the element, so you'll generally want to set element.style.display = "none";
instead.
A better approach, generally, is to modify the classes to which the element belongs and have your styles defined in a separate stylesheet.
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