style

style returns the declaration block for the current style.

Syntax

styleObj = cssRule.style

Parameters

styleObj is an object reference to the style declaration

Example


function stilo() { alert(document.styleSheets[0]. cssRules[0].style.cssText); } // displays "background-color: gray;"

Notes

The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).

Specification

DOM Level 2 Style - cssRule

DOM CSS Properties List

The following is a list of the CSS properties that are supported in the Netscape 6 DOM and accessible by means of the style property on elements.

The following complete document examples shows the typical use of the element.style property to get and set the CSS properties listed here:

<html> <head> <script> function changeStyle() { c = document.getElementById("tid"); c.style = "padding right: 20px"; } </script> <table border="1"><tr> <td id="tid">Example Cell</td></tr> </table> <form> <input value="addpad" type="button" onclick="changeStyle();" /> </form> </html>

<html>
 
<head>
 
<script>
 
  function changeStyle()  {
 
    c = document.getElementById("tid");
 
    c.style = "padding right: 20px";
 
  }
 
</script>
 
<table border="1"><tr>
 
  <td id="tid">Example Cell</td></tr>
 
</table>
 
<form>
 
  <input value="addpad" 
    type="button" 
    onclick="changeStyle();" />
 
</form>
 
</html>

Styles can be returned or set with the style property and these attributes but that you cannot set values directly using constructions such as style="background-color: blue" from the DOM, where the value is a string that contains both the attribute and the value you wish to set. By itself, the style property should only be used as a "getter" and not a "setter." In other words, the first of the following two constructions is bad, and the latter is better practice in the DOM:


bad: element.style = "background-color: blue"; good: element.style.backgroundColor = "blue";

Note that the bad example above may actually set the background color of the given element, but this assignment overwrites any style information that already existed on that element, and then cannot be added to or updated without other overwrites. The special style attributes available off of the element's style property allow you to "manage" the style of your elements in a safer and more organized way.

See also: the Element style property.

You can check the syntax for the values of these attributes by consulting the DOM CSS specification.


accelerator	font	pause
azimuth	fontFamily	pauseAfter
background	fontSize	pauseBefore
backgroundAttachment	fontSizeAdjust	pitch
backgroundColor	fontStretch	pitchRange
backgroundImage	fontStyle	playDuring
backgroundPosition	fontVariant	position
backgroundRepeat	fontWeight	quotes
border	height	richness
borderBottom	left	right
borderBottomColor	length	size
borderBottomStyle	letterSpacing	speak
borderBottomWidth	lineHeight	speakHeader
borderCollapse	listStyle	speakNumeral
borderColor	listStyleImage	speakPunctuation
borderLeft	listStylePosition	speechRate
borderLeftColor	listStyleType	stress
borderLeftStyle	margin	tableLayout
borderLeftWidth	marginBottom	textAlign
borderRight	marginLeft	textDecoration
borderRightColor	marginRight	textIndent
borderRightStyle	marginTop	textShadow
borderRightWidth	markerOffset	textTransform
borderSpacing	marks	top
borderStyle	maxHeight	unicodeBidi
borderTop	maxWidth	verticalAlign
borderTopColor	minHeight	visibility
borderTopStyle	minWidth	voiceFamily
borderTopWidth	MozBinding	volume
borderWidth	MozOpacity	whiteSpace
bottom	orphans	widows
captionSide	outline	width
clear	outlineColor	wordSpacing
clip	outlineStyle	zIndex
color	outlineWidth
content	overflow
counterIncrement	padding
counterReset	paddingBottom
cssFloat	paddingLeft
cssText	paddingRight
cue	paddingTop
cueAfter	page
cueBefore	pageBreakAfter
cursor	pageBreakBefore
direction	pageBreakInside
display	parentRule
elevation
emptyCells