Article Introduction: native JS style contrast. |
In order to achieve a particular effect we need to dynamically change the CSS properties of a particular label using JavaScript. For example: When the mouse passes a picture we let the picture add a border, the code may be like this:
<script type= "Text/javascript" >
function Imageover (e) {
E.style.border= "1px solid red";
}
function Imageout (e) {
e.style.borderwidth=0;
}
</script>
What should be the attributes behind the style in JavaScript?
JavaScript CSS Style Property Comparison table
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 |
Float |
Floatstyle |
Margin |
Margin |
Margin-bottom |
MarginBottom |
Margin-left |
MarginLeft |
Margin-right |
MarginRight |
Margin-top |
MarginTop |
Padding |
Padding |
Padding-bottom |
Paddingbottom |
Padding-left |
Paddingleft |
Padding-right |
Paddingright |
Padding-top |
Paddingtop |
|
Background |
Background |
Background-attachment |
Backgroundattachment |
Background-color |
BackgroundColor |
Background-image |
BackgroundImage |
Background-position |
Backgroundposition |
Background-repeat |
Backgroundrepeat |
Color |
Color |
|
Display |
Display (with none) |
List-style-type |
listStyleType |
List-style-image |
listStyleImage |
List-style-position |
listStylePosition |
List-style |
ListStyle |
White-space |
Whitespace |
|
Font |
Font |
Font-family |
FontFamily |
Font-size |
FontSize |
Font-style |
FontStyle |
Font-variant |
Fontvariant |
Font-weight |
FontWeight |
|
Letter-spacing |
Letterspacing |
Line-break |
LineBreak |
Line-height |
Lineheight |
Text-align |
TextAlign |
Text-decoration |
TextDecoration |
Text-indent |
Textindent |
Text-justify |
Textjustify |
Text-transform |
Texttransform |
Vertical-align |
VerticalAlign |