We are very fortunate that we can use JavaScript to dynamically style HTML elements. We can do this by leveraging the HTML Document Object Model (DOM). DOM provides us with the very useful Style object. The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. Here is an example of the syntax used for styling an element.

document.getElementById("id").style.property="value"

The values that you provide depend on the property. Fortunately, the values are very similar to those you would use in Cascading Style Sheets (CSS). So if you are familiar with HTML and CSS, using the DOM Style object with JavaScript should not be too challenging for you. Here is a listing of the more common Style object properties:

Background Style Properties

Property	Description
background	Gets or sets all the background properties
backgroundAttachment	Gets or sets whether a background image is fixed or scrolls with the page
backgroundColor	Gets or sets the background color of an element
backgroundImage	Gets or sets the background image for an element
backgroundPosition	Gets or sets the starting position of a background image
backgroundRepeat	Gets or sets how to repeat a background-image

Border and Outline Style Properties

Property	Description
border	Gets or sets border-width, border-style, and border-color
borderBottom	Gets or sets all the borderBottom properties
borderBottomColor	Gets or sets the color of the bottom border
borderBottomStyle	Gets or sets the style of the bottom border
borderBottomWidth	Gets or sets the width of the bottom border
borderColor	Gets or sets the color of an element's border
borderLeft	Gets or sets all the borderLeft properties
borderLeftColor	Gets or sets the color of the left border
borderLeftStyle	Gets or sets the style of the left border
borderLeftWidth	Gets or sets the width of the left border
borderRight	Gets or sets all the borderRight
borderRightColor	Gets or sets the color of the right border
borderRightStyle	Gets or sets the style of the right border
borderRightWidth	Gets or sets the width of the right border
borderStyle	Gets or sets the style of an element's border
borderTop	Gets or sets all the borderTop properties
borderTopColor	Gets or sets the color of the top border
borderTopStyle	Gets or sets the style of the top border
borderTopWidth	Gets or sets the width of the top border
borderWidth	Gets or sets the width of an element's border
outline	Gets or sets all the outline properties
outlineColor	Gets or sets the color of the outline around a element
outlineStyle	Gets or sets the style of the outline around an element
outlineWidth	Gets or sets the width of the outline around an element

List Style Properties

Property	Description
listStyle	Gets or sets list-style-image, list-style-position, and list-style-type
listStyleImage	Gets or sets an image as the list-item marker
listStylePosition	Gets or sets the position of the list-item marker
listStyleType	Gets or sets the list-item marker type

Margin and Padding Style Properties

Property	Description
margin	Gets or sets the margins of an element
marginBottom	Gets or sets the bottom margin of an element
marginLeft	Gets or sets the left margin of an element
marginRight	Gets or sets the right margin of an element
marginTop	Gets or sets the top margin of an element
padding	Gets or sets the padding of an element
paddingBottom	Gets or sets the bottom padding of an element
paddingLeft	Gets or sets the left padding of an element
paddingRight	Gets or sets the right padding of an element
paddingTop	Gets or sets the top padding of an element

Position and Layout Style Properties

Property	Description
bottom	Gets or sets the bottom position of a positioned element
clear	Gets or sets the position of the element relative to floating objects
clip	Gets or sets which part of a positioned element is visible
cssFloat	Gets or sets the horizontal alignment of an object
cursor	Gets or sets the type of cursor to display for the mouse pointer
display	Gets or sets an element's display type
height	Gets or sets the height of an element
left	Gets or sets the left position of a positioned element
maxHeight	Gets or sets the maximum height of an element
maxWidth	Gets or sets the maximum width of an element
minHeight	Gets or sets the minimum height of an element
minWidth	Gets or sets the minimum width of an element
overflow	Gets or sets what to do with content that renders outside the element box
position	Gets or sets the type of positioning method used for an element
right	Gets or sets the right position of a positioned element
top	Gets or sets the top position of a positioned element
verticalAlign	Gets or sets the vertical alignment of the content in an element
visibility	Gets or sets whether an element should be visible
width	Gets or sets the width of an element
zIndex	Gets or sets the stack order of a positioned element

Table Style Properties

Property	Description
borderCollapse	Gets or sets whether the table border should be collapsed
borderSpacing	Gets or sets the space between cells in a table
captionSide	Gets or sets the position of the table caption
emptyCells	Gets or sets whether to show the border and background of empty cells
tableLayout	Gets or sets the way to lay out table cells, rows, and columns

Text Style Properties

Property	Description
color	Gets or sets the color of the text
direction	Gets or sets the text direction
font	Gets or sets font-style, font-variant, font-weight, font-size, line-height, and font-family
fontFamily	Gets or sets the font face for text
fontSize	Gets or sets the font size of the text
fontSizeAdjust	Gets or sets the font aspect value
fontStyle	Gets or sets whether the style of the font is normal, italic or oblique
fontVariant	Gets or sets whether the font should be displayed in small capital letters
fontWeight	Gets or sets the boldness of the font
letterSpacing	Gets or sets the space between characters in a text
lineHeight	Gets or sets the distance between lines in a text
quotes	Gets or sets the type of quotation marks for embedded quotations
textAlign	Gets or sets the horizontal alignment of text
textDecoration	Gets or sets the decoration of a text
textIndent	Gets or sets the indentation of the first line of text
textShadow	Gets or sets the shadow effect of a text
textTransform	Gets or sets the case of a text
whiteSpace	Gets or sets how to handle tabs, line breaks and whitespace in a text
wordSpacing	Gets or sets the spacing between words in a text

Let us take a look at an example where we can change the color of the text in a paragraph element using the DOM Style object.

<html>
<head>
<script type="text/javascript">
  function chgColor(color) {
    document.getElementById('p1').style.color = color;
  }
</script>
</head>
<body>

<p id="p1">Select one of the options below to change the 
    text color in this paragraph.</p>
 
<input type="radio" name="group1" value="Red" 
    onClick="chgColor(value)"/>Red<br />
<input type="radio" name="group1" value="Blue" 
    onClick="chgColor(value)"/>Blue<br />
<input type="radio" name="group1" value="Green" 
    onClick="chgColor(value)"/>Green
 
</body>
</html> 

Select one of the options below to change the text color in this paragraph. Red Blue Green

You should note that the text color of the paragraph with an id of p1 changes dynamically and without the page being reloaded. As you can see, the DOM Style object can be extremely useful. A practical use case is where you may want to change the style of different elements when wanting to catch the attention, or change the size of text on the screen. Also, its common to use these techniques when informing the user of an error on the screen.

• Privacy
• Support
• Archive