Javascript Property Names for CSS getElementById

Comments 2 Standard

document.getElementById(“id_name_here”).style.property = your_value_here;

CSS Property JavaScript Equivalent
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
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
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
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
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

Sorry, not mine. This is from Code Punk but it’s very useful for those of us who don’t have the benefit of being able to memorize a gazillion languages and properties, quirks, and nuances in all of them. I thought I’d share the love.

Advertisements

2 thoughts on “Javascript Property Names for CSS getElementById

  1. Thanks for this, came in useful the other day – a year & a half later! =)

    Would it be fair to say from the above, that the Javascript equivalent in every case is a camel-cased version of the CSS?

    Was just looking at the list & seems a handy way to remember, if true.

    Dave

  2. Thank you! This is perfect! I hope you do not mind I actually took your information and made it into an array with JavaScript, I figured to dump it here so you have this also. in this case, I am using it to take the css style off OrigObj and apply it to TargObj (using DIV’s):

    for(y=0;y<OrigObj.style.length;y++) {
    try {
    eval("TargObj.style."+cssEq[(OrigObj.style[y])]+"='"+OrigObj.style.getPropertyValue(OrigObj.style[y])+"';");
    }catch(e) {}
    }

    Anywho, below is what I felt might be useful to others, I came up with this using the info off this site:

    var cssEq=new Array();cssEq['background']="background";cssEq['background-attachment']="backgroundAttachment";cssEq['background-color']="backgroundColor";cssEq['background-image']="backgroundImage";cssEq['background-position']="backgroundPosition";cssEq['background-repeat']="backgroundRepeat";cssEq['border']="border";cssEq['border-bottom']="borderBottom";cssEq['border-bottom-color']="borderBottomColor";cssEq['border-bottom-style']="borderBottomStyle";cssEq['border-bottom-width']="borderBottomWidth";cssEq['border-color']="borderColor";cssEq['border-left']="borderLeft";cssEq['border-left-color']="borderLeftColor";cssEq['border-left-style']="borderLeftStyle";cssEq['border-left-width']="borderLeftWidth";cssEq['border-right']="borderRight";cssEq['border-right-color']="borderRightColor";cssEq['border-right-style']="borderRightStyle";cssEq['border-right-width']="borderRightWidth";cssEq['border-style']="borderStyle";cssEq['border-top']="borderTop";cssEq['border-top-color']="borderTopColor";cssEq['border-top-style']="borderTopStyle";cssEq['border-top-width']="borderTopWidth";cssEq['border-width']="borderWidth";cssEq['clear']="clear";cssEq['clip']="clip";cssEq['color']="color";cssEq['cursor']="cursor";cssEq['display']="display";cssEq['filter']="filter";cssEq['font']="font";cssEq['font-family']="fontFamily";cssEq['font-size']="fontSize";cssEq['font-variant']="fontVariant";cssEq['font-weight']="fontWeight";cssEq['height']="height";cssEq['left']="left";cssEq['letter-spacing']="letterSpacing";cssEq['line-height']="lineHeight";cssEq['list-style']="listStyle";cssEq['list-style-image']="listStyleImage";cssEq['list-style-position']="listStylePosition";cssEq['list-style-type']="listStyleType";cssEq['margin']="margin";cssEq['margin-bottom']="marginBottom";cssEq['margin-left']="marginLeft";cssEq['margin-right']="marginRight";cssEq['margin-top']="marginTop";cssEq['overflow']="overflow";cssEq['padding']="padding";cssEq['padding-bottom']="paddingBottom";cssEq['padding-left']="paddingLeft";cssEq['padding-right']="paddingRight";cssEq['padding-top']="paddingTop";cssEq['page-break-after']="pageBreakAfter";cssEq['page-break-before']="pageBreakBefore";cssEq['position']="position";cssEq['float']="styleFloat";cssEq['text-align']="textAlign";cssEq['text-decoration']="textDecoration";cssEq['text-decoration: blink']="textDecorationBlink";cssEq['text-decoration: line-through']="textDecorationLineThrough";cssEq['text-decoration: none']="textDecorationNone";cssEq['text-decoration: overline']="textDecorationOverline";cssEq['text-decoration: underline']="textDecorationUnderline";cssEq['text-indent']="textIndent";cssEq['text-transform']="textTransform";cssEq['top']="top";cssEq['vertical-align']="verticalAlign";cssEq['visibility']="visibility";cssEq['width']="width";cssEq['z-index']="zIndex";

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s