Did you find this useful?
Socialize it today.


JavaScript Styling Elements

Saturday, May 05, 2012

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


PropertyDescription
backgroundGets or sets all the background properties
backgroundAttachmentGets or sets whether a background image is fixed or scrolls with the page
backgroundColorGets or sets the background color of an element
backgroundImageGets or sets the background image for an element
backgroundPositionGets or sets the starting position of a background image
backgroundRepeatGets or sets how to repeat a background-image


Border and Outline Style Properties


PropertyDescription
borderGets or sets border-width, border-style, and border-color
borderBottomGets or sets all the borderBottom properties
borderBottomColorGets or sets the color of the bottom border
borderBottomStyleGets or sets the style of the bottom border
borderBottomWidthGets or sets the width of the bottom border
borderColorGets or sets the color of an element's border
borderLeftGets or sets all the borderLeft properties
borderLeftColorGets or sets the color of the left border
borderLeftStyleGets or sets the style of the left border
borderLeftWidthGets or sets the width of the left border
borderRightGets or sets all the borderRight
borderRightColorGets or sets the color of the right border
borderRightStyleGets or sets the style of the right border
borderRightWidthGets or sets the width of the right border
borderStyleGets or sets the style of an element's border
borderTopGets or sets all the borderTop properties
borderTopColorGets or sets the color of the top border
borderTopStyleGets or sets the style of the top border
borderTopWidthGets or sets the width of the top border
borderWidthGets or sets the width of an element's border
outlineGets or sets all the outline properties
outlineColorGets or sets the color of the outline around a element
outlineStyleGets or sets the style of the outline around an element
outlineWidthGets or sets the width of the outline around an element


List Style Properties


PropertyDescription
listStyleGets or sets list-style-image, list-style-position, and list-style-type
listStyleImageGets or sets an image as the list-item marker
listStylePositionGets or sets the position of the list-item marker
listStyleTypeGets or sets the list-item marker type


Margin and Padding Style Properties


PropertyDescription
marginGets or sets the margins of an element
marginBottomGets or sets the bottom margin of an element
marginLeftGets or sets the left margin of an element
marginRightGets or sets the right margin of an element
marginTopGets or sets the top margin of an element
paddingGets or sets the padding of an element
paddingBottomGets or sets the bottom padding of an element
paddingLeftGets or sets the left padding of an element
paddingRightGets or sets the right padding of an element
paddingTopGets or sets the top padding of an element


Position and Layout Style Properties


PropertyDescription
bottomGets or sets the bottom position of a positioned element
clearGets or sets the position of the element relative to floating objects
clipGets or sets which part of a positioned element is visible
cssFloatGets or sets the horizontal alignment of an object
cursorGets or sets the type of cursor to display for the mouse pointer
displayGets or sets an element's display type
heightGets or sets the height of an element
leftGets or sets the left position of a positioned element
maxHeightGets or sets the maximum height of an element
maxWidthGets or sets the maximum width of an element
minHeightGets or sets the minimum height of an element
minWidthGets or sets the minimum width of an element
overflowGets or sets what to do with content that renders outside the element box
positionGets or sets the type of positioning method used for an element
rightGets or sets the right position of a positioned element
topGets or sets the top position of a positioned element
verticalAlignGets or sets the vertical alignment of the content in an element
visibilityGets or sets whether an element should be visible
widthGets or sets the width of an element
zIndexGets or sets the stack order of a positioned element


Table Style Properties


PropertyDescription
borderCollapseGets or sets whether the table border should be collapsed
borderSpacingGets or sets the space between cells in a table
captionSideGets or sets the position of the table caption
emptyCellsGets or sets whether to show the border and background of empty cells
tableLayoutGets or sets the way to lay out table cells, rows, and columns


Text Style Properties


PropertyDescription
colorGets or sets the color of the text
directionGets or sets the text direction
fontGets or sets font-style, font-variant, font-weight, font-size, line-height, and font-family
fontFamilyGets or sets the font face for text
fontSizeGets or sets the font size of the text
fontSizeAdjustGets or sets the font aspect value
fontStyleGets or sets whether the style of the font is normal, italic or oblique
fontVariantGets or sets whether the font should be displayed in small capital letters
fontWeightGets or sets the boldness of the font
letterSpacingGets or sets the space between characters in a text
lineHeightGets or sets the distance between lines in a text
quotesGets or sets the type of quotation marks for embedded quotations
textAlignGets or sets the horizontal alignment of text
textDecorationGets or sets the decoration of a text
textIndentGets or sets the indentation of the first line of text
textShadowGets or sets the shadow effect of a text
textTransformGets or sets the case of a text
whiteSpaceGets or sets how to handle tabs, line breaks and whitespace in a text
wordSpacingGets 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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor Murachs JavaScript and DOM Scripting Professional JavaScript for Web Developers