Comparison between CSS attributes and JavaScript Encoding

CSS and JS work closely together to add a lot of unique effects to our pages. To achieve some special effect, we need to use JavaScript to dynamically change the CSS attribute of a tag.

For example, when you move the mouse over an image, we add a border to the image, Code This may be the case: What are the attributes behind the style in JavaScript?

<SCRIPT type = "text/JavaScript">

Function imageover (e ){

E. style. Border = "1px solid red ";

}

Function imageout (e ){

E. style. borderwidth = 0;

}

</SCRIPT>

Javascript CSS style Attribute Table

Comparison between box labels and attributes

CSS syntax (Case Insensitive) JavaScript syntax (case sensitive)

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

Comparison of color and background tags and attributes

CSS syntax (Case Insensitive) JavaScript syntax (case sensitive)

BACKGROUND Background

Background-attachment backgroundattachment

Background-color backgroundcolor

Background-image backgroundimage

Background-position backgroundposition

Background-repeat backgroundrepeat

Color color

Comparison between style labels and attributes

CSS syntax (Case Insensitive) JavaScript syntax (case sensitive)

Display display

List-style-type liststyletype

List-style-image liststyleimage

List-style-position liststyleposition

List-style liststyle

White-space whitespace

Text style label and attribute comparison

CSS syntax (Case Insensitive) JavaScript syntax (case sensitive)

Font font

Font-family fontfamily

Font-size fontsize

Font-style fontstyle

Font-variant fontvariant

Font-weight fontweight

Text tag and attribute comparison

CSS syntax (Case Insensitive) JavaScript syntax (case sensitive)

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