Hot to set an element’s CSS style using Javascript

Posted by on March 26, 2012 in CSS, Javascript | 0 comments

Hot to set an element’s CSS style using Javascript

CSS is a great way to reduce the amount of markup that needs to be on a page. It also standardizes how your pages look and feel and should make it easier and quicker to add new content. But what happens if you have Javascript logic on your page and based off some user action, you want to change the appearance of an object? With Javascript, you can reference the object, then set the style equal to your desired new value. You can even change the object’s class and in most browsers, it will re-render the object with the styling of the new class. This is great if you want to change a lot of the element’s styles all at once. The process is shown below.

var Object = document.getElementById(“someElementOnPageID”);
Object.style.StyleName = ‘Style Value';

Of course if you’re using this method in production, be sure to check the object to make sure it exists, as it will break Javascript if you try to set the style of null.

The Style Value can be the same thing you could put in an inline style or in a CSS style declaration in an external file. There are no restrictions that I’m aware of in this department. Now for most styles that are one word, the “StyleName” in the code shown above is just going to be the style, but for styles such as padding-right, the hyphen will break Javascript.

CSS Styles with Hyphens

The table below is a reference in alphabetical order of the different styles that have hyphens, and their corresponding Javascript reference when setting the style.

CSS Property JavaScript Reference
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
vertical-align verticalAlign
z-index zIndex
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>