Code to modify CSS properties with JavaScript

Code to modify CSS properties with JavaScript

Font: [Increase decrease] Type: Reprint time: 2013-05-06 I want to comment

This article mainly introduces the method of modifying CSS properties with native JavaScript, and the friends you need can refer to the following

Modifying CSS properties with JavaScript only writes native JavaScript.

1. Modify the tag's class attribute value with JS:

The class attribute is one of the methods of referencing a style sheet on a label, whose value is a selector for a style sheet, and if the value of the class attribute is changed, the style sheet referenced by the label is replaced, so this is the first method of modification.

The code to change the class property of a label is:

document.getElementById (id). ClassName = string;
document.getElementById (ID) is used to get the DOM object for the tag, and you can get it in other ways. ClassName is a property of a DOM object that corresponds to the class property of the tag. The string is the new value of the Class property, which should be a defined CSS selector.

Using this method, you can replace the CSS style sheet of the tag with another one, or you can have a tag with no CSS style applied to the specified style.

Example:

Copy CodeThe code is as follows:
<style type= "Text/css" >
txt
font-size:30px; Font-weight:bold; color:red;
}
</style>
<div id= "tt" > Welcome! </div>
<p><button onclick= "SetClass ()" > Change style </button></p>
<script type= "Text/javascript" >
function SetClass ()
{
document.getElementById ("tt"). ClassName = "txt";
}
</script>

2. Modify the label's style property value with JS:

The Style property is also one of the ways to refer to a style sheet on a label, and its value is a CSS style sheet. The DOM object also has a style property, but the property itself is an object, the Style object's properties and CSS properties are one by one corresponding, when the property of the style object is changed, the corresponding tag CSS property values are changed, so this is the second method of modification.

The code to change the CSS properties of a tag is:

document.getElementById (ID). style. property name = value;
document.getElementById (ID) is used to get the DOM object for the tag, and you can get it in other ways. A style is a property of a DOM object, which is itself an object. The property name is the property name of the Style object, and it corresponds to a CSS property.

Description: This method modifies a single CSS property, which does not affect other CSS property values on the label.

Example:

Copy CodeThe code is as follows:
Div id= "T2" > Welcome! </div>
<p><button onclick= "setSize ()" > Size </button>
<button onclick= "SetColor ()" > Color </button>
<button onclick= "Setbgcolor ()" > Background </button>
<button onclick= "setbd ()" > Border </button>
</p>
<script type= "Text/javascript" >
function SetSize ()
{
document.getElementById ("T2"). Style.fontsize = "30px";
}
function SetColor ()
{
document.getElementById ("T2"). Style.color = "Red";
}
function Setbgcolor ()
{
document.getElementById ("T2"). Style.backgroundcolor = "Blue";
}
function Setbd ()
{
document.getElementById ("T2"). Style.border = "3px solid #FA8072";
}
</script>

Method: document.getElementById ("xx"). What are all the attributes in Style.xxx

Box label and attribute control
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
Color and background labels and attribute comparisons
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
Style label and attribute control
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 labels and attribute comparisons
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 label 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

Code to modify CSS properties with JavaScript