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>
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.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources