Примеры поддержки динамических свойств CSS
Как обратиться к свойствам CSS-стилей из JavaScript

Style object		\| Background properties \| Border/Outline properties \| List properties \| Margin/Padding properties \| Misc properties \| Positioning/Layout properties \| Printing properties \| Table properties \| Text properties \| Table Object Collections \| Table Object Properties \| td/th Object Properties \| tr Object Properties \| tr Object Methods \| Textarea Object Properties \| Textarea Object Methods \|
Background properties
background	.style.background="color image repeat attachment position" top left top center top right center left center center center right bottom left bottom center bottom right	<html> <head> <script type="text/javascript"> function displayResult() { document.body.style.background="#FF0000"; } </script> </head> <body> <h1>Hello World!</h1> <br /> <button type="button" onclick="displayResult()">Set background</button> </body> </html>
backgroundAttachment	.style.backgroundAttachment="scroll\|fixed\|inherit"	<html> <head> <style type="text/css"> body { background:#f3f3f3 url('http://www.03www.su/pic2/001.jpg') no-repeat right top;} </style> <script type="text/javascript"> function displayResult() { document.body.style.backgroundAttachment="fixed"; } </script> </head> <body> <button type="button" onclick="displayResult()">Set background image to be fixed</button> <br /> <h1>Hello World!</h1> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> </body> </html>
backgroundColor	.style.backgroundColor="color\|inherit\|transparent"	<html> <head> <script type="text/javascript"> function displayResult() { document.body.style.backgroundColor="#f3f3f3"; } </script> </head> <body> <h1>Hello World!</h1> <br /> <button type="button" onclick="displayResult()">Set background color</button> </body> </html>
backgroundImage	.style.backgroundImage="url('URL')\|none\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.body.style.backgroundColor="#f3f3f3"; document.body.style.backgroundImage="url('http://www.03www.su/pic2/001.jpg')"; } </script> </head> <body> <h1>Hello World!</h1> <br /> <button type="button" onclick="displayResult()">Set background image</button> </body> </html>
backgroundPosition	.style.backgroundPosition="center top left right bottom";	<html> <head> <style> div { background-image: url('http://www.03www.su/pic2/001.jpg'); background-repeat: no-repeat; width: 400px; height: 400px; border: 1px solid #000000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("div1").style.backgroundPosition="center bottom"; } </script> </head> <body> <button type="button" onclick="displayResult()">Position background image</button> <br /> <div id="div1"> </div> </body> </html>
backgroundRepeat	.style.backgroundRepeat="repeat\|repeat-x\|repeat-y\|no-repeat\|inherit"	<html> <head> <style type="text/css"> body { background:#f3f3f3 url('http://www.03www.su/pic2/001.jpg'); } </style> <script type="text/javascript"> function displayResult() { document.body.style.backgroundRepeat="repeat-y"; } </script> </head> <body> <button type="button" onclick="displayResult()">Repeat vertically</button> <br /> <h1>Hello World!</h1> <p>This is a paragraph</p> </body> </html>
Border/Outline properties
border	.style.border="width style color"	<html> <head> <style type="text/css"> #ex1 { border: thin dotted #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.border="thick solid #0000FF"; } </script> </head> <body> <div id="ex1">This is some text</div> <br /> <button type="button" onclick="displayResult()">Change border</button> </body> </html>
borderBottom	.style.borderBottom="width style color"	<html> <head> <style type="text/css"> #ex1 { border: thin dotted #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderBottom="thick solid #0000FF"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change bottom border</button> </body> </html>
borderBottomColor	.style.borderBottomColor="color\|transparent\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderBottomColor="#00FF00"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change color of bottom border</button> </body> </html>
borderBottomStyle	.style.borderBottomStyle="value" none hidden dotted dashed solid double groove ridge inset outset inherit	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderBottomStyle="dotted"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change style of bottom border</button> </body> </html>
borderBottomWidth	.style.borderBottomWidth="thin\|medium\|thick\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderBottomWidth="thick"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change width of bottom border</button> </body> </html>
borderColor	.style.borderColor="color\|transparent\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: thick solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderColor="#00FF00 #0000FF"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change color of border</button> </body> </html>
borderLeft	.style.borderLeft="width style color"	<html> <head> <style type="text/css"> #ex1 { border: thin dotted #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderLeft="thick solid #0000FF"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change left border</button> </body> </html>
borderLeftColor	.style.borderLeftColor="color\|transparent\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderLeftColor="#00FF00"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change color of left border</button> </body> </html>
borderLeftStyle	.style.borderLeftStyle="value" none hidden dotted dashed solid double groove ridge inset outset inherit	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderLeftStyle="dotted"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change style of left border</button> </body> </html>
borderLeftWidth	.style.borderLeftWidth="thin\|medium\|thick\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderLeftWidth="thick"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change width of left border</button> </body> </html>
borderRight	.style.borderRight="width style color"	<html> <head> <style type="text/css"> #ex1 { border: thin dotted #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderRight="thick solid #0000FF"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change right border</button> </body> </html>
borderRightColor	.style.borderRightColor="color\|transparent\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderRightColor="#00FF00"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change color of right border</button> </body> </html>
borderRightStyle	.style.borderRightStyle="value" none hidden dotted dashed solid double groove ridge inset outset inherit	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderRightStyle="dotted"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change style of right border</button> </body> </html>
borderRightWidth	.style.borderRightWidth="thin\|medium\|thick\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderRightWidth="thick"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change width of right border</button> </body> </html>
borderStyle	.style.borderStyle="value" none hidden dotted dashed solid double groove ridge inset outset inherit	<html> <head> <style type="text/css"> #ex1 { border: thick solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderStyle="dotted double"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change style of the four borders</button> </body> </html>
borderTop	.style.borderTop="width style color"	<html> <head> <style type="text/css"> #ex1 { border: thin dotted #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderTop="thick solid #0000FF"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change top border</button> </body> </html>
borderTopColor	.style.borderTopColor="color\|transparent\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderTopColor="#00FF00"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change color of top border</button> </body> </html>
borderTopStyle	.style.borderTopStyle="value" none hidden dotted dashed solid double groove ridge inset outset inherit	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderTopStyle="dotted"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change style of top border</button> </body> </html>
borderTopWidth	.style.borderTopWidth="thin\|medium\|thick\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderTopWidth="thick"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change width of top border</button> </body> </html>
borderWidth	.style.borderTopWidth="thin\|medium\|thick\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.borderWidth="thick thin"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change width of the four borders</button> </body> </html>
outline	.style.outline="width style color\|inherit"	<html> <head> <style type="text/css"> #ex1 { border:1px solid red; outline:green dotted thick; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.outline="thick solid #0000FF"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change outline</button> </body> </html>
outlineColor	.style.outlineColor="color\|invert\|inherit"	<html> <head> <style type="text/css"> #ex1 { border:1px solid red; outline:green dotted thick; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.outlineColor="#0000FF"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change outline color</button> </body> </html>
outlineStyle	.style.outlineStyle="value" none hidden dotted dashed solid double groove ridge inset outset inherit	<html> <head> <style type="text/css"> #ex1 { border:1px solid red; outline:green dotted thick; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.outlineStyle="solid"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change outline style</button> </body> </html>
outlineWidth	.style.outlineWidth="thin\|medium\|thick\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border:1px solid red; outline:green dotted thick; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.outlineWidth="10px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change outline width</button> </body> </html>
List properties
listStyle	.style.listStyle="type position image"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("ul1").style.listStyle="decimal inside"; } </script> </head> <body> <ul id="ul1"> <li>Coffee</li> <li>Tea</li> <li>Water</li> <li>Soda</li> </ul> <br /> <button type="button" onclick="displayResult()">Change list style</button> </body> </html>
listStyleImage	.style.listStyleImage="none\|url\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("ul1").style.listStyleImage="url('sqorange.gif')"; } </script> </head> <body> <ul id="ul1"> <li>Coffee</li> <li>Tea</li> <li>Water</li> <li>Soda</li> </ul> <br /> <button type="button" onclick="displayResult()">Change list-item marker</button> </body> </html>
listStylePosition	.style.listStylePosition="outside\|inside\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("ul1").style.listStylePosition="inside"; } </script> </head> <body> <ul id="ul1"> <li>Coffee</li> <li>Tea</li> <li>Water</li> <li>Soda</li> </ul> <br /> <button type="button" onclick="displayResult()">Indent list-item marker</button> </body> </html>
listStyleType	.style.listStyleType="value" armenian The marker is traditional Armenian numbering circle The marker is a circle cjk-ideographic The marker is plain ideographic numbers decimal The marker is a number. This is default for <ol> decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.) disc The marker is a filled circle. This is default for <ul> georgian The marker is traditional Georgian numbering hebrew The marker is traditional Hebrew numbering hiragana The marker is traditional Hiragana numbering hiragana-iroha The marker is traditional Hiragana iroha numbering inherit The value of the listStyleType property is inherited from parent element katakana The marker is traditional Katakana numbering katakana-iroha The marker is traditional Katakana iroha numbering lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.) lower-greek The marker is lower-greek lower-latin The marker is lower-latin (a, b, c, d, e, etc.) lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.) none No marker is shown square The marker is a square upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.) upper-latin The marker is upper-latin (A, B, C, D, E, etc.) upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("ul1").style.listStyleType="square"; } </script> </head> <body> <ul id="ul1"> <li>Coffee</li> <li>Tea</li> <li>Water</li> <li>Soda</li> </ul> <br /> <button type="button" onclick="displayResult()">Change list-item marker type</button> </body> </html>
Margin/Padding properties
margin	.style.margin="%\|length\|auto\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.margin="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change margin</button> </body> </html>
marginBottom	.style.marginBottom="%\|length\|auto\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.marginBottom="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change bottom margin</button> </body> </html>
marginLeft	.style.marginLeft="%\|length\|auto\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.marginLeft="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change left margin</button> </body> </html>
marginRight	.style.marginRight="%\|length\|auto\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.marginRight="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change right margin</button> </body> </html>
marginTop	.style.marginTop="%\|length\|auto\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.marginTop="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change top margin</button> </body> </html>
padding	.style.padding="%\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.padding="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change padding</button> </body> </html>
paddingBottom	.style.paddingBottom="%\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.paddingBottom="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change bottom padding</button> </body> </html>
paddingLeft	.style.paddingLeft="%\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.paddingLeft="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change left padding</button> </body> </html>
paddingRight	.style.paddingRight="%\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.paddingRight="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change right padding</button> </body> </html>
paddingTop	.style.paddingTop="%\|length\|inherit"	<html> <head> <style type="text/css"> #ex1 { border: 1px solid #FF0000; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("ex1").style.paddingTop="100px"; } </script> </head> <body> <div id="ex1">This is some text.</div> <br /> <button type="button" onclick="displayResult()">Change top padding</button> </body> </html>
Misc properties
cssText	.style.cssText="string"	<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("p1").style.cssText); } </script> </head> <body> <p id="p1" style="border:2px dashed green;color:red;">This is a paragraph.</p> <br /> <button type="button" onclick="displayResult()">Get style declaration</button> </body> </html>
Positioning/Layout properties
bottom	.style.bottom="auto\|length\|%\|inherit"	<html> <head> <style type="text/css"> #b1 { position:absolute; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("b1").style.bottom="100px"; } </script> </head> <body> <input type="button" id="b1" onclick="displayResult()" value="Set bottom position to 100 px" /> </body> </html>
clear	.style.clear="none\|left\|right\|both"	<html> <head> <style type="text/css"> img { float:left; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.clear="left"; } </script> </head> <body> <img src="w3javascript.gif" width="100" height="132" /> <p id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <input type="button" onclick="displayResult()" value="Clear left side of text" /> </body> </html>
clip	.style.clip="auto\|rect(top right bottom left)\|inherit"	<html> <head> <style type="text/css"> img { position:absolute; top:100px; } </style> <script type="text/javascript"> function clipImage() { document.getElementById("img1").style.clip="rect(0px 75px 75px 0px)"; } function clearClip() { document.getElementById("img1").style.clip="auto"; } </script> </head> <body> <img id="img1" src="w3javascript.gif" width="100" height="132" /> <input type="button" onclick=clipImage() value="Clip image" /> <input type="button" onclick=clearClip() value="Unclip image" /> </body> </html>
cssFloat	.style.cssFloat="left\|right\|none\|inherit"	<html> <head> <script type="text/javascript"> function floatRight() { document.getElementById("img1").style.cssFloat="right"; } function floatLeft() { document.getElementById("img1").style.cssFloat="left"; } </script> </head> <body> <img id="img1" src="w3javascript.gif" width="100" height="132" /> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <input type="button" onclick="floatRight()" value="Float right" /> <input type="button" onclick="floatLeft()" value="Float left" /> </body> </html>
cursor	.style.cursor="value" auto Browser default cursor (often an arrow). This is default crosshair Crosshair cursor default Platform-depended default cursor (often an arrow) e-resize East arrows. Indicates that an element is resizable help Arrow with question mark, indicating that help is available move Crossed arrows, indicating that something can be moved n-resize North arrows. Indicates that an element is resizable ne-resize North-east arrows. Indicates that an element is resizable nw-resize North-west. Indicates that an element is resizable pointer Normal hand s-resize South arrows. Indicates that an element is resizable se-resize South-east arrows. Indicates that an element is resizable sw-resize South-west arrows. Indicates that an element is resizable text The cursor indicates text url The URL of a cursor file to be used. Tip: Always define a generic cursor at the end of the list in case none of the url-defined cursors work w-resize West arrows. Indicates that an element is resizable wait Hourglass or watch, indicating that the program is busy	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.cursor="pointer"; } </script> </head> <body> <p id="p1">Mouse over this text!</p> <br /> <button type="button" onclick="displayResult()">Change cursor</button> </body> </html>
display	.style.display="value" block Element is rendered as a block-level element compact Element is rendered as a block-level or inline element. Depends on context inherit The value of the display property is inherited from parent element inline Element is rendered as an inline element. This is default inline-block Element is rendered as a block box inside an inline box inline-table Element is rendered as an inline table (like <table>), with no line break before or after the table list-item Element is rendered as a list marker This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline") none Element will not be displayed run-in Element is rendered as block-level or inline element. Depends on context table Element is rendered as a block table (like <table>), with a line break before and after the table table-caption Element is rendered as a table caption (like <caption>) table-cell Element is rendered as a table cell (like <td> and <th>) table-column Element is rendered as a column of cells (like <col>) table-column-group Element is rendered as a group of one or more columns (like <colgroup>) table-footer-group Element is rendered as a table footer row (like <tfoot>) table-header-group Element is rendered as a table header row (like <thead>) table-row Element is rendered as a table row (like <tr>) table-row-group Element is rendered as a group of one or more rows (like <tbody>)	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.display="none"; } </script> </head> <body> <p id="p1">This is some text.</p> <input type="button" onclick="displayResult()" value="Do not display paragraph" /> </body> </html>
height	.style.height="auto\|length\|%\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("b1").style.height="50px"; } </script> </head> <body> <input type="button" id="b1" onclick="displayResult()" value="Change height" /> </body> </html>
left	.style.left="auto\|length\|%\|inherit"	<html> <head> <style type="text/css"> #b1 { position:absolute; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("b1").style.left="100px"; } </script> </head> <body> <input type="button" id="b1" onclick="displayResult()" value="Set left position to 100 px" /> </body> </html>
maxHeight	.style.maxHeight="none\|length\|%\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.maxHeight="15px"; } </script> </head> <body> <p id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <input type="button" onclick="displayResult()" value="Set max height" /> </body> </html>
maxWidth	.style.maxWidth="none\|length\|%\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.maxWidth="150px"; } </script> </head> <body> <p id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <input type="button" onclick="displayResult()" value="Set max width" /> </body> </html>
minHeight	.style.minHeight="none\|length\|%\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.minHeight="100px"; } </script> </head> <body> <p id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <input type="button" onclick="displayResult()" value="Set min height" /> </body> </html>
minWidth	.style.minWidth="none\|length\|%\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.minWidth="200px"; } </script> </head> <body> <p style="background:red;width:100px;" id="p1"> This paragraph has a width of 100px.<br /> When clicking on the button below,<br /> the min-width will be set to 200px.<br /> As a result, this paragraph should be 200 pixels wide.</p> <input type="button" onclick="displayResult()" value="Set min width" /> </body> </html>
overflow	.style.overflow="visible\|hidden\|scroll\|auto\|inherit"	<html> <head> <style type="text/css"> div { border:1px solid red; width:100px; height:100px; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("div1").style.overflow="hidden"; } </script> </head> <body> <div id="div1"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </div> <br /> <input type="button" onclick="displayResult()" value="Hide overflow" /> </body> </html>
position	.style.position="static\|absolute\|fixed\|relative\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("b1").style.position="absolute"; document.getElementById("b1").style.top="100px"; document.getElementById("b1").style.left="100px"; } </script> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <input type="button" id="b1" onclick="displayResult()" value="Position me" /> </body> </html>
right	.style.right="auto\|length\|%\|inherit"	<html> <head> <style type="text/css"> #b1 { position:absolute; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("b1").style.right="100px"; } </script> </head> <body> <input type="button" id="b1" onclick="displayResult()" value="Set right position to 100 px" /> </body> </html>
top	.style.top="auto\|length\|%\|inherit"	<html> <head> <style type="text/css"> #b1 { position:absolute; } </style> <script type="text/javascript"> function displayResult() { document.getElementById("b1").style.top="100px"; } </script> </head> <body> <input type="button" id="b1" onclick="displayResult()" value="Set top position to 100 px" /> </body> </html>
verticalAlign	.style.verticalAlign="value" length Raises or lower an element by the specified length. Negative values are allowed % Raises or lower an element in a percent of the "line-height" property. Negative values are allowed baseline Align the baseline of the element with the baseline of the parent element. This is default sub Aligns the element as it was subscript super Aligns the element as it was superscript top The top of the element is aligned with the top of the tallest element on the line text-top The top of the element is aligned with the top of the parent element's font middle The element is placed in the middle of the parent element bottom The bottom of the element is aligned with the lowest element on the line text-bottom The bottom of the element is aligned with the bottom of the parent element's font inherit Specifies that the value of the verticalAlign property should be inherited from the parent element	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("td1").style.verticalAlign="bottom"; } </script> </head> <body> <table border="1" height="100px"> <tr> <td id="td1">Some example text</td> </tr> </table> <br /> <input type="button" onclick="displayResult()" value="Align text" /> </body> </html>
visibility	.style.visibility="visible\|hidden\|collapse\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.visibility="hidden"; } </script> </head> <body> <p id="p1">This is some text.</p> <input type="button" onclick="displayResult()" value="Hide paragraph" /> </body> </html>
zIndex	.style.zIndex="auto\|number\|inherit"	<html> <head> <style type="text/css"> #img1 { position:absolute; left:0px; top:0px; z-index:-1 } </style> <script type="text/javascript"> function changeStackOrder() { document.getElementById("img1").style.zIndex="1"; } </script> </head> <body> <h1>This is a Heading</h1> <img id="img1" src="bulbon.gif" width="100" height="180"> <input type="button" onclick="changeStackOrder()" value="Change stack order" /> <p>Default z-index is 0. Z-index -1 has lower priority.</p> </body> </html>
Printing properties
orphans	.style.orphans="number\|inherit"	<html> <head> <script type="text/javascript"> function ChangeOrphans() { document.getElementById("p1").style.orphans=document.getElementById("orphans").value; } </script> <style> .othercontent { width:400px; border-top:19cm solid #c3c3c3; } @page { /* set size of printed page */ size:21cm 27cm; margin-top:2cm; } @media print { .orphans { orphans:2; } } </style> </head> <body> <div class="othercontent" /> <input id="orphans" value="2"/> <button onclick="ChangeOrphans();">Change orphans</button> <p style="font-size:120%" id="p1"> Change orphans and see the print preview.<br /> Line 2<br /> Line 3<br /> Line 4<br /> Line 5<br /> Line 6<br /> Line 7<br /> Line 8<br /> </p> </body> </html>
pageBreakAfter	.style.pageBreakAfter="auto\|always\|avoid\|emptystring\|left\|right\|inherit"	<html> <head> <script type="text/javascript"> function setPageBreak() { document.getElementById("footer").style.pageBreakAfter="always"; } </script> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p id="footer">This is a footer paragraph.</p> <button type="button" onclick="setPageBreak()">Set page-break after footer paragraph</button> <p>Click the button above and see the changes in print or print preview.</p> </body> </html>
pageBreakBefore	.style.pageBreakBefore="auto\|always\|avoid\|emptystring\|left\|right\|inherit"	<html> <head> <script type="text/javascript"> function setPageBreak() { document.getElementById("footer").style.pageBreakBefore="always"; } </script> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p id="footer">This is a footer paragraph.</p> <button type="button" onclick="setPageBreak()">Set page-break before footer paragraph</button> <p>Click the button above and see the changes in print or print preview.</p> </body> </html>
pageBreakInside	.style.pageBreakInside="auto\|avoid\|inherit"	<html> <head> <script type="text/javascript"> function setPageBreak() { document.getElementById("footer").style.pageBreakInside="avoid"; } </script> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p id="footer">This is a footer paragraph.</p> <button type="button" onclick="setPageBreak()">Avoid page-break inside footer paragraph</button> </body> </html>
widows	.style.widows="number\|inherit"	<html> <head> <script type="text/javascript"> function ChangeWidows() { document.getElementById("p1").style.widows=document.getElementById("widows").value; } </script> <style> .othercontent { width:400px; border-top:19cm solid #c3c3c3; } @page { /* set size of printed page */ size:21cm 27cm; margin-top:2cm; } @media print { .widows { widows:2; } } </style> </head> <body> <div class="othercontent" /> <input id="widows" value="2"/> <button onclick="ChangeWidows();">Change widows</button> <p style="font-size:120%" id="p1"> Change widows and see the print preview.<br /> Line 2<br /> Line 3<br /> Line 4<br /> Line 5<br /> Line 6<br /> Line 7<br /> Line 8<br /> </p> <div class="othercontent" /> </body> </html>
Table properties
borderCollapse	.style.borderCollapse="separate\|collapse\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTable").style.borderCollapse="collapse"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$150</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Collapse border</button> </body> </html>
borderSpacing	.style.borderSpacing="length length\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTable").style.borderSpacing="20px"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$150</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Change border spacing</button> </body> </html>
captionSide	.style.captionSide="top\|bottom\|left\|right\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTable").style.captionSide="bottom"; } </script> </head> <body> <table id="myTable" border="1"> <caption>My savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$150</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Move table caption</button> </body> </html>
emptyCells	.style.emptyCells="show\|hide\|inherit"	<html> <head> <script type="text/javascript"> function show() { document.getElementById("myTable").style.emptyCells="show"; } function hide() { document.getElementById("myTable").style.emptyCells="hide"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td></td> </tr> </table> <br /> <button type="button" onclick="show()">Show empty cells</button> <button type="button" onclick="hide()">Hide empty cells</button> </body> </html>
tableLayout	.style.tableLayout="automatic\|fixed\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTable").style.tableLayout="fixed"; } </script> </head> <body> <table id="myTable" width="300" border="1"> <thead> <th>Table header</th> <th>Table header</th> </thead> <tbody> <tr> <td>This is some text. This is some text.</td> <td>This is another text.</td> </tr> </tbody> </table> <br /> <button type="button" onclick="displayResult()">Set fixed table layout</button> </body> </html>
Text properties
color	.style.color="color\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.color="#ff0000"; document.getElementById("p2").style.color="magenta"; } </script> </head> <body> <p id="p1">This is an example paragraph.</p> <p id="p2">This is also an example paragraph.</p> <input type="button" onclick="displayResult()" value="Change text color" /> </body> </html>
direction	.style.direction="ltr\|rtl\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.direction="rtl"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Let text flow from right to left</button> </body> </html>
font	.style.font="[style variant weight size/lineHeight family] or [reserved word]" .style.font="italic bold 20px arial,serif";	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.font="italic bold 20px arial,serif"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change font</button> </body> </html>
fontFamily	.style.fontFamily="font1, font2, etc.\|inherit" .style.fontFamily="Impact,Charcoal,sans-serif";	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.fontFamily="Impact,Charcoal,sans-serif"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change font</button> </body> </html>
fontSize	.style.fontSize="value\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.fontSize="xx-large"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change font size</button> </body> </html>
fontSizeAdjust	.style.fontSizeAdjust="none\|value\|inherit" .style.fontSizeAdjust="0.58";	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.fontSizeAdjust="0.58"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Adjust font size</button> </body> </html>
fontStyle	.style.fontStyle="normal\|italic\|oblique\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.fontStyle="italic"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change font style</button> </body> </html>
fontVariant	.style.fontVariant="normal\|small-caps\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.fontVariant="small-caps"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change font</button> </body> </html>
fontWeight	.style.fontWeight="value" normal Font is normal. This is default lighter Font is lighter bold Font is bold bolder Font is bolder 100 200 300 400 500 600 700 800 900 Defines from light to bold characters. 400 is the same as normal, and 700 is the same as bold inherit The value of the fontWeight property is inherited from parent element	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.fontWeight="900"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change font weight</button> </body> </html>
letterSpacing	.style.letterSpacing="normal\|length\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.letterSpacing="15px"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change letter spacing</button> </body> </html>
lineHeight	.style.lineHeight="normal\|number\|length\|%\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("div1").style.lineHeight="2"; } </script> </head> <body> <div id="div1"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </div> <br /> <button type="button" onclick="displayResult()">Change line height</button> </body> </html>
quotes	.style.quotes="none\|string string string string\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("q1").style.quotes="'<' '>' '[start]' '[end]'"; } </script> </head> <body> <q id="q1">This is a <q>quoted element</q> in another quoted element.</q> <br /> <button type="button" onclick="displayResult()">Change quotation marks</button> </body> </html>
textAlign	.style.textAlign="left\|right\|center\|justify\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.textAlign="center"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Align text</button> </body> </html>
textDecoration	.style.textDecoration="none\|underline\|overline\|line-through\|blink\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.textDecoration="underline overline"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Decorate text</button> </body> </html>
textIndent	.style.textIndent="length\|%\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("div1").style.textIndent="50px"; } </script> </head> <body> <div id="div1"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </div> <br /> <button type="button" onclick="displayResult()">Indent text</button> </body> </html>
textShadow	.style.textShadow="none\|h-shadow v-shadow blur color\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.textShadow="5px 5px 1px #ff0000"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Add shadow to text</button> </body> </html>
textTransform	.style.textTransform="none\|capitalize\|uppercase\|lowercase\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.textTransform="capitalize"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Convert text</button> </body> </html>
unicodeBidi	.style.unicodeBidi="normal\|embed\|bidi-override\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.unicodeBidi="bidi-override"; } </script> </head> <body> <p>This is some text.</p> <p id="p1" style="direction:rtl">This is another text.</p> <br /> <button type="button" onclick="displayResult()">Override text</button> </body> </html>
whiteSpace	.style.whiteSpace="normal\|nowrap\|pre\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("div1").style.whiteSpace="pre"; } </script> </head> <body> <div id="div1"> This is so me text. This is some tex t. This is some text. This is some text. This is some text. This is some text. </div> <br /> <button type="button" onclick="displayResult()">Preserve whitespace/line breaks</button> </body> </html>
wordSpacing	.style.wordSpacing="normal\|length\|inherit"	<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("p1").style.wordSpacing="50px"; } </script> </head> <body> <p id="p1">This is some text.</p> <br /> <button type="button" onclick="displayResult()">Change space</button> </body> </html>
Table Object Collections
cells		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("myTable").rows[0].cells.length); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Show number of cells</button> </body> </html>
rows		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("myTable").rows.length); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Show number of rows in table</button> </body> </html>
tBodies		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("myTable").tBodies.length); } </script> </head> <body> <table id="myTable" border="1"> <tbody> <tr> <td>cell 1</td> <td>cell 2</td> </tr> </tbody> <tbody> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </tbody> </table> <br /> <button type="button" onclick="displayResult()">Show number of tbodies in table</button> </body> </html>
caption		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("myTable").caption.innerHTML); } </script> </head> <body> <table id="myTable" border="1"> <caption>This is a table caption</caption> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Alert table caption</button> </body> </html>
cellPadding		<html> <head> <script type="text/javascript"> function padding() { document.getElementById('myTable').cellPadding="25"; } function spacing() { document.getElementById('myTable').cellSpacing="15"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="padding()">Change Cellpadding</button> <button type="button" onclick="spacing()">Change Cellspacing</button> </body> </html>
cellSpacing		<html> <head> <script type="text/javascript"> function padding() { document.getElementById('myTable').cellPadding="25"; } function spacing() { document.getElementById('myTable').cellSpacing="15"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="padding()">Change Cellpadding</button> <button type="button" onclick="spacing()">Change Cellspacing</button> </body> </html>
frame		<html> <head> <script type="text/javascript"> function above() { document.getElementById('myTable').frame="above"; } function below() { document.getElementById('myTable').frame="below"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="above()">Show above frames</button> <button type="button" onclick="below()">Show below frames</button> </body> </html>
rules		<html> <head> <script type="text/javascript"> function rows() { document.getElementById('myTable').rules="rows"; } function cols() { document.getElementById('myTable').rules="cols"; } </script> </head> <body> <table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="rows()">Show only row borders</button> <button type="button" onclick="cols()">Show only col borders</button> </body> </html>
summary		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById('myTable').summary); } </script> </head> <body> <table id="myTable" border="1" summary="Example table of employees"> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>John</td> <td>Doe</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Show table summary</button> </body> </html>
tFoot		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById('myTable').tFoot.innerHTML); } </script> </head> <body> <table id="myTable" border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> <br /> <button type="button" onclick="displayResult()">Show innerHTML of tfoot</button> </body> </html>
tHead		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById('myTable').tHead.innerHTML); } </script> </head> <body> <table id="myTable" border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> <br /> <button type="button" onclick="displayResult()">Show innerHTML of thead</button> </body> </html>
Table Object Properties
createCaption()		<html> <head> <script type="text/javascript"> function displayResult() { var x=document.getElementById("myTable").createCaption(); x.innerHTML="<b>My table caption</b>"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Create caption</button> </body> </html>
createTFoot()		<html> <head> <script type="text/javascript"> function createTFoot() { var x=document.getElementById("myTable"); if (!x.tFoot) { var footer=x.createTFoot(); var row=footer.insertRow(0); var cell=row.insertCell(0); cell.innerHTML="<b>This is a table footer.</b>"; } } function deleteTFoot() { document.getElementById("myTable").deleteTFoot(); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="createTFoot()">Create tfoot</button> <button type="button" onclick="deleteTFoot()">Delete tfoot</button> </body> </html>
createTHead()		<html> <head> <script type="text/javascript"> function createTHead() { var x=document.getElementById("myTable"); if (!x.tHead) { var header=x.createTHead(); var row=header.insertRow(0); var cell=row.insertCell(0); cell.innerHTML="<b>This is a table header</b>"; } } function deleteTHead() { document.getElementById("myTable").deleteTHead(); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="createTHead()">Create thead</button> <button type="button" onclick="deleteTHead()">Delete thead</button> </body> </html>
deleteCaption()		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTable").deleteCaption(); } </script> </head> <body> <table id="myTable" border="1"> <caption>This is a table caption</caption> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Delete caption</button> </body> </html>
deleteRow()		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTable").deleteRow(0); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Delete first row</button> </body> </html>
deleteTFoot()		<html> <head> <script type="text/javascript"> function createTFoot() { var x=document.getElementById("myTable"); if (!x.tFoot) { var footer=x.createTFoot(); var row=footer.insertRow(0); var cell=row.insertCell(0); cell.innerHTML="<b>This is a table footer.</b>"; } } function deleteTFoot() { document.getElementById("myTable").deleteTFoot(); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="createTFoot()">Create tfoot</button> <button type="button" onclick="deleteTFoot()">Delete tfoot</button> </body> </html>
deleteTHead()		<html> <head> <script type="text/javascript"> function createTHead() { var x=document.getElementById("myTable"); if (!x.tHead) { var header=x.createTHead(); var row=header.insertRow(0); var cell=row.insertCell(0); cell.innerHTML="<b>This is a table header</b>"; } } function deleteTHead() { document.getElementById("myTable").deleteTHead(); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="createTHead()">Create thead</button> <button type="button" onclick="deleteTHead()">Delete thead</button> </body> </html>
insertRow()		<html> <head> <script type="text/javascript"> function displayResult() { var table=document.getElementById("myTable"); var row=table.insertRow(0); var cell1=row.insertCell(0); var cell2=row.insertCell(1); cell1.innerHTML="New"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Insert new row</button> </body> </html>
td/th Object Properties
abbr		<html> <head> <script type="text/javascript"> function displayResult() { var table=document.getElementById("myTable"); alert(table.rows[0].cells[0].abbr); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td abbr="def">Keep abbreviated names short. Browsers may render them repeatedly.</td> <td>cell data</td> </tr> <tr> <td>cell data</td> <td>cell data</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Get abbreviation</button> </body> </html>
axis		<html> <head> <script type="text/javascript"> function displayResult() { var x=document.getElementById("myTable"); var th=x.getElementsByTagName("th"); for (var i=0;i<th.length;i++) { alert ("The " + (i+1) + ". column axis is: " + th[i].axis); } } </script> </head> <body> <table border="1" id="myTable"> <tr> <th axis="car">Name</th> <th axis="country">Country</th> </tr> <tr> <td>BMW</td> <td>Germany</td> </tr> <tr> <td>Volvo</td> <td>Sweden</td> </tr> <tr> <td>Saab</td> <td>Sweden</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Get Axis</button> </body> </html>
cellIndex		<html> <head> <script type="text/javascript"> function displayResult(x) { alert("Cell index is: " + x.cellIndex); } </script> </head> <body> <table border="1"> <tr> <td onclick="displayResult(this)">Click to show cellIndex</td> <td onclick="displayResult(this)">Click to show cellIndex</td> </tr> </table> </body> </html>
ch		<html> <head> <script type="text/javascript"> function displayResult() { var c=document.getElementById("myCol"); alert("The alignment character for the second column is: " + c.ch); } </script> </head> <body> <table border="1"> <colgroup> <col /> <col id="myCol" align="char" char="." /> </colgroup> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table> <button type="button" onclick="displayResult()">Get alignment character</button> </body> </html>
chOff		<html> <head> <script type="text/javascript"> function displayResult() { var c=document.getElementById("myCol"); alert("The horizontal offset of the ch property is: " + c.chOff); } </script> </head> <body> <table border="1"> <colgroup> <col /> <col id="myCol" align="char" char="." charoff="2" /> </colgroup> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table> <button type="button" onclick="displayResult()">Get horizontal offset of the alignment character</button> </body> </html>
colSpan		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myHeader1").colSpan="2"; } </script> </head> <body> <table border="1"> <tr> <th id="myHeader1">Month</th> <th id="myHeader2">Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> <tr> <td>March</td> <td>$80.00</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Change colSpan for the first cell</button> </body> </html>
headers		<html> <head> <script type="text/javascript"> function displayResult() { var table=document.getElementById("myTable"); for (var i=0;i<table.rows[1].cells.length;i++) { alert(table.rows[1].cells[i].headers); } } </script> </head> <body> <table id="myTable" border="1" width="100%"> <tr> <th id="name">Name</td> <th id="email">Email</td> <th id="phone">Phone</td> <th id="addr">Address</td> </tr> <tr> <td headers="name">John Doe</td> <td headers="email">someone@example.com</td> <td headers="phone">+45342323</td> <td headers="addr">Rosevn 56,4300 Sandnes,Norway</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Get cell headers of second row</button> </body> </html>
rowSpan		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myHeader1").rowSpan="2"; } </script> </head> <body> <table border="1"> <tr> <th id="myHeader1">Month</th> <th id="myHeader2">Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> <tr> <td>March</td> <td>$80.00</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Change rowSpan for the first cell</button> </body> </html>
vAlign		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById('td1').vAlign="top"; document.getElementById('td2').vAlign="top"; document.getElementById('td3').vAlign="top"; } </script> </head> <body> <table width="50%" border="1"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Text</th> </tr> <tr> <td id="td1">Peter</td> <td id="td2">Griffin</td> <td id="td3">Hello my name is Peter Griffin. I need a long text for this example. I need a long text for this example.</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Top-align content</button> </body> </html>
tr Object Properties
ch		<html> <head> <script type="text/javascript"> function displayResult() { var c=document.getElementById("myCol"); alert("The alignment character for the second column is: " + c.ch); } </script> </head> <body> <table border="1"> <colgroup> <col /> <col id="myCol" align="char" char="." /> </colgroup> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table> <button type="button" onclick="displayResult()">Get alignment character</button> </body> </html>
chOff		<html> <head> <script type="text/javascript"> function displayResult() { var c=document.getElementById("myCol"); alert("The horizontal offset of the ch property is: " + c.chOff); } </script> </head> <body> <table border="1"> <colgroup> <col /> <col id="myCol" align="char" char="." charoff="2" /> </colgroup> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100.00</td> </tr> <tr> <td>February</td> <td>$10.00</td> </tr> </table> <button type="button" onclick="displayResult()">Get horizontal offset of the alignment character</button> </body> </html>
rowIndex		<html> <head> <script type="text/javascript"> function displayResult(x) { alert("Row index is: " + x.rowIndex); } </script> </head> <body> <table border="1"> <tr onclick="displayResult(this)"> <td>Click to show rowIndex</td> </tr> <tr onclick="displayResult(this)"> <td>Click to show rowIndex</td> </tr> <tr onclick="displayResult(this)"> <td>Click to show rowIndex</td> </tr> </table> </body> </html>
sectionRowIndex		<html> <head> <script type="text/javascript"> function displayResult(x) { alert("Section row index is: " + x.sectionRowIndex); } </script> </head> <body> <table border="1"> <thead> <tr onclick="displayResult(this)"> <th>Click to show sectionRowIndex</th> </tr> <tr onclick="displayResult(this)"> <th>Click to show sectionRowIndex</th> </tr> </thead> <tbody> <tr onclick="displayResult(this)"> <td>Click to show sectionRowIndex</td> </tr> <tr onclick="displayResult(this)"> <td>Click to show sectionRowIndex</td> </tr> </tbody> <tfoot> <tr onclick="displayResult(this)"> <td>Click to show sectionRowIndex</td> </tr> <tr onclick="displayResult(this)"> <td>Click to show sectionRowIndex</td> </tr> </tfoot> </table> </body> </html>
vAlign		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById('tr2').vAlign="top"; } </script> </head> <body> <table width="50%" border="1"> <tr id="tr1"> <th>Firstname</th> <th>Lastname</th> <th>Text</th> </tr> <tr id="tr2"> <td>Peter</td> <td>Griffin</td> <td>Hello my name is Peter Griffin. I need a long text for this example. I need a long text for this example.</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Top-align content</button> </body> </html>
tr Object Methods
deleteCell()		<html> <head> <script type="text/javascript"> function displayResult() { var firstRow=document.getElementById("myTable").rows[0]; firstRow.deleteCell(0); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Delete first cell</button> </body> </html>
insertCell()		<html> <head> <script type="text/javascript"> function displayResult() { var firstRow=document.getElementById("myTable").rows[0]; var x=firstRow.insertCell(-1); x.innerHTML="New cell" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>First cell</td> <td>Second cell</td> <td>Third cell</td> </tr> </table> <br /> <button type="button" onclick="displayResult()">Insert cell</button> </body> </html>
Textarea Object Properties
cols		<html> <head> <script type="text/javascript"> function displayResult() { var textarea=document.getElementById("myTextarea"); textarea.cols=document.getElementById("myInput").value; } </script> </head> <body> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <p>Set cols attribute value: <input type="text" id="myInput" value="60" /> <button type="button" onclick="displayResult()">Change cols attribute</button></p> </body> </html>
defaultValue		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("myTextarea").defaultValue); } </script> </head> <body> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <button type="button" onclick="displayResult()">Alert default value</button> </body> </html>
form		<html> <head> <script type="text/javascript"> function displayResult() { var x=document.getElementById("myTextarea").form.id; alert(x); } </script> </head> <body> <form id="form1"> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> </form> <br /> <button type="button" onclick="displayResult()">Show id of container form</button> </body> </html>
name		<html> <head> <script type="text/javascript"> function displayResult() { var x=document.getElementById("myTextarea").name; alert(x); } </script> </head> <body> <textarea id="myTextarea" name="txt1" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <button type="button" onclick="displayResult()">Show name of text area</button> </body> </html>
readOnly		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTextarea").readOnly=true; } </script> </head> <body> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <button type="button" onclick="displayResult()">Make text area read-only</button> </body> </html>
rows		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTextarea").rows=10; } </script> </head> <body> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <button type="button" onclick="displayResult()">Change number of visible rows</button> </body> </html>
type		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("myTextarea").type); } </script> </head> <body> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <button type="button" onclick="displayResult()">Alert type</button> </body> </html>
value		<html> <head> <script type="text/javascript"> function displayResult() { alert(document.getElementById("myTextarea").value); } </script> </head> <body> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <button type="button" onclick="displayResult()">Alert value of text area</button> </body> </html>
Textarea Object Methods
select()		<html> <head> <script type="text/javascript"> function displayResult() { document.getElementById("myTextarea").select(); } </script> </head> <body> <textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <br /> <button type="button" onclick="displayResult()">Select contents of text area</button> </body> </html>

↑↑

АРХИВ JAVASCRIPT + CSS АРХИВ JAVASCRIPT + CSS АРХИВ JAVASCRIPT + CSS

:: • до 2005 • 2007 • 2008 • 2009 • 2010 • 2011 ::

Примеры поддержки динамических свойств CSS Как обратиться к свойствам CSS-стилей из JavaScript

Примеры поддержки динамических свойств CSS
Как обратиться к свойствам CSS-стилей из JavaScript