venerdì 15 luglio 2011

Proprietà CSS in JavaScript.

Con JavaScript è possibile modificare i valori degli attributi di uno stile CSS. Tuttavia la nomenclatura degli attributi in CSS non sempre è la stessa utilizzabile in JavaScript. Di seguito si riporta una tabella di conversione utile allo scopo.

Come modificare il valore di un attributo CSS:

- Internet Explorer
document.all.div_id.style.JS_property_reference = "new_CSS_property_value";

- Vecchie versioni di Netscape (4.7 o precedenti)
document.div_id.JS_property_reference = "new_CSS_property_value";

- Netscape 6.0+, Opera o Mozilla
document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

Tabella di conversione:

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

Nessun commento:

Posta un commento