Javascript Style Reference

Tags: , , , ,

I’m always forgetting what the JavaScript equivalent is of certain CSS styles.  for instance you could change the border by:

document.getElementById(‘myText’).style.border = ‘1px solid #333′;

CSS PropertyJavaScript Reference
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-width borderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatstyleFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexz-index
Javascript CSS Style reference

Shamelessly stolen from: http://codepunk.hardwar.org.uk/css2js.htm

Permalink » No comments

Ball

Tags: , , , ,

First design post is nothing too imaginative.  Thought I’d start off with something small and random I did.

It’s a red ball on a blue backdrop – yeap that’s it.  I was fiddling around with PS styles thinking of what kind of graphics may make good stock.  I never really came up with anything revolutionary and this was the end of that venture.

ball

Permalink » No comments