element.style

  • Revision slug: Talk:DOM/element.style
  • Revision title: element.style
  • Revision id: 127153
  • Created:
  • Creator: kitchin
  • Is current revision? Yes
  • Comment CSSStyleDeclaration; 15 words added

Revision Content

The description ot the style property does not seem correct.

From the W3C DOM 2 reference (Section 1.6.4):

  "The style attribute of an HTML element is accessible through the
    ElementCSSInlineStyle interface which is defined in the CSS module
    [DOM Level 2 Style Sheets and CSS]."

   <URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-011100101>


Following that link makes me think that the style attribute of an HTML element is part of the CSS2 extended interface:

  "The CSS2Properties interface represents a convenience mechanism
    for retrieving and setting properties within a CSSStyleDeclaration."

  <URL:http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-extended>


and that it is not a 'block' but an object with proerties that can be changed. The current description is:

  "Returns the block of style rules on the element."


maybe is should be:

  "Returns the style object of the element."


In the notes section it states:

  "though you cannot set style on an element by assigning to the style
   property directly"


Which is also incorrect. Style properties can be set directly, however the affect of setting them must be considered within the context of cascading styles and specificity (i.e. their affect may be over–ridden by some other style rule).

I'll leave this comment here for a while, if there is no indication to the contrary, I'll go ahead and make changes.

Yep, this page was wrong. I think I've made the necessary changes. -David Baron 22:40, 27 December 2005 (PST)


Thanks David.

What you have done is a great improvement, but I think the summary should be:

Returns an object that contains the element style properties and values.


It actually returns an object, not a declaration (which infers a string of stuff to me). I'll have a go at it tomorrow when I've thought about it a bit more.

Incidentally, it seems that some of entries start with a 'Summary' heading, and others with the name of the property/method/whatever. Which is preferred? I tend to go for the name as summary is pretty meaningless.

Cheers,

--RobG 07:43, 31 December 2005 (PST)

CSSStyleDeclaration

The common part of DOM:cssRule.style and this page should be factored out into a separate page, documenting CSSStyleDeclaration. --Nickolay 02:38, 26 June 2006 (PDT) (It turns out that DOM:CSS is the page I was thinking of. ) --Nickolay 02:46, 26 June 2006 (PDT)

I did some work on this, see CSSStyleDeclaration. --kitchin 14 December 2009

Summary

I think the following sentence in the Summary is incorrect or misleading. I don't think you can set a style property with set attribute at all.

It is generally better to use the style property than
elt.setAttribute('style', '...') from a script, since use of the
style property will not overwrite other CSS properties that may be 
specified in the style attribute.
ele.setAttribute("style", "color: blue;") does not work, nor does ele.style = "color: blue;" which one would assume should work as the parallel to the specification
<span id="foo" style="color: blue;"> 
Which IE users can use.

Therefore I've replaced the sentence indicating what can be done.


--User:Riboribo 24 Apr 2007

Revision Source

<p>The description ot the style property does not seem correct. </p><p>From the W3C DOM 2 reference (Section 1.6.4):
</p>
<pre>  "The style attribute of an HTML element is accessible through the
    ElementCSSInlineStyle interface which is defined in the CSS module
    [DOM Level 2 Style Sheets and CSS]."

   &lt;URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-011100101&gt;
</pre>
<p><br>
Following that link makes me think that the style attribute of an HTML element is part of the CSS2 extended interface:
</p>
<pre>  "The CSS2Properties interface represents a convenience mechanism
    for retrieving and setting properties within a CSSStyleDeclaration."

  &lt;URL:http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-extended&gt;
</pre>
<p><br>
and that it is not a 'block' but an object with proerties that can be changed. The current description is:
</p>
<pre>  "Returns the block of style rules on the element."
</pre>
<p><br>
maybe is should be:
</p>
<pre>  "Returns the style object of the element."
</pre>
<p><br>
In the notes section it states:
</p>
<pre>  "though you cannot set style on an element by assigning to the style
   property directly"
</pre>
<p><br>
Which is also incorrect. Style properties <b>can</b> be set directly, however the affect of setting them must be considered within the context of cascading styles and specificity (i.e. their affect may be over–ridden by some other style rule).
</p><p>I'll leave this comment here for a while, if there is no indication to the contrary, I'll go ahead and make changes.
</p><p>Yep, this page was wrong. I think I've made the necessary changes. -<a href="User:DBaron">David Baron</a> 22:40, 27 December 2005 (PST)
</p>
<hr>
<p>Thanks David.
</p><p>What you have done is a great improvement, but I think the summary should be:
</p>
<pre class="eval">Returns an object that contains the element style properties and values.
</pre>
<p><br>
It actually returns an object, not a declaration (which infers a string of stuff to me). I'll have a go at it tomorrow when I've thought about it a bit more.
</p><p>Incidentally, it seems that some of entries start with a 'Summary' heading, and others with the name of the property/method/whatever. Which is preferred? I tend to go for the name as summary is pretty meaningless.
</p><p>Cheers,
</p><p>--<a href="User:RobG">RobG</a> 07:43, 31 December 2005 (PST)
</p>
<h3 id="CSSStyleDeclaration" name="CSSStyleDeclaration">CSSStyleDeclaration</h3>
<p>The common part of <a href="/en/DOM/cssRule.style" title="en/DOM/cssRule.style">DOM:cssRule.style</a> and this page should be factored out into a separate page, documenting <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a>. --<a href="/User:Nickolay" title="User:Nickolay">Nickolay</a> 02:38, 26 June 2006 (PDT) (It turns out that <a href="/en/DOM/CSS" title="en/DOM/CSS">DOM:CSS</a> is the page I was thinking of. ) --<a href="/User:Nickolay" title="User:Nickolay">Nickolay</a> 02:46, 26 June 2006 (PDT)</p>
<p>I did some work on this, see <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration">CSSStyleDeclaration</a>. --<a href="https://developer.mozilla.org/User:kitchin" rel="custom nofollow">kitchin</a> 14 December 2009</p><h3 id="Summary" name="Summary"> Summary </h3>
<p>I think the following sentence in the Summary is incorrect or misleading. I don't think you can set a style property with set attribute at all.
</p>
<pre>It is generally better to use the style property than
elt.setAttribute('style', '...') from a script, since use of the
style property will not overwrite other CSS properties that may be 
specified in the style attribute.
</pre>
ele.setAttribute("style", "color: blue;") does not work, nor does ele.style = "color: blue;" which one would assume should work as the parallel to the specification <pre>&lt;span id="foo" style="color: blue;"&gt; </pre> Which IE users can use.
<p>Therefore I've replaced the sentence indicating what can be done.
</p><p><br>
--<a href="User:Riboribo">User:Riboribo</a> 24 Apr 2007
</p>
Revert to this revision