Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set element style property in strict mode?

Tags:

javascript

css

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.

like image 366
Letharion Avatar asked Jul 23 '14 09:07

Letharion


People also ask

Which property is used to set the style attribute of an element?

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.

How can the style of an element be modified?

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.

How do you know where an element style is coming from?

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.


1 Answers

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.

like image 146
Quentin Avatar answered Nov 16 '22 01:11

Quentin