Converting CSS Properties into JavaScript

There are other examples of this out there on the web but I cna never find one when I need it so have added it to my blog for easy access.

CSS Property JavaScript Reference
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

Usage

Targeting elements by getElementById seems pretty universal.

document.getElementById('x').style.backgroundPosition = '0 -200px';

Converting px into percentage and em for relative CSS font sizes

Recently I have started to get a lot of requests to make certain fonts on my websites this pixel (px) size or that pixel size.

For accessibility reasons I do not use pixels as a measurement of font size. Pixels are what is known in the trades as a fixed font size so they do not resize on some browsers when the user manually changes their browsers font size. The main problem is IE6 which despite all logical sense is an insanely widely used web browser.

So if a visitor to a poorly coded website had difficulty reading small text and they tried to increase the font size in IE6 and a lesser web developer had set the font sizes in pixels, then that user would not be able to read the web page. You could say that page would be inaccessible to them.

Thankfully there are some font size declarations that do resize in all the different web browsers. These are percentage (%) and em (em). I prefer percentages because that is what I started using way back in the day and they still haven’t let me down. But both effectively do the same thing.

To make my life easy I made the following table to convert fixed pixel sizes into % and em. The maths is quite simple. The basic font size on most browsers is 16px which is 100% or 1em. To work out the percentage of 17px I divided 17 by 16 and multiplied by 100. The result is 106%. For em I just divided 17 by 16.

The other thing to note is that web browsers do not display non integer font sizes. So a percent of 105 might display at 17px or 16px depending on the browser.

One final point I should add is that every time you decrease the font size by 1px a certain number of users will no longer read the text. For that reason I do not like to use font sizes under 12px/75%/.75em.

Px Size % Size Em Size
36px 225% 2.25em
35px 219% 2.19em
34px 213% 2.13em
33px 206% 2.06em
32px 200% 2em
31px 194% 1.94em
30px 188% 1.88em
29px 1.81% 1.81em
28px 175% 1.75em
27px 169% 1.69em
26px 163% 1.63em
25px 156% 1.5em
24px 150% 1.5em
23px 144% 1.44em
22px 138% 1.38em
21px 131% 1.31em
20px 125% 1.25em
19px 119% 1.19em
18px 113% 1.13em
17px 106% 1.06em
16px 100% 1em
15px 94% .94em
14px 88% .88em
13px 81% .81em
12px 75% .75em
11px 69% .69em
10px 63% .63em
9px 56% .56em
8px 50% .50em

Note: there might be some subtle differences on less popular browsers.