Modify CSS properties with JavaScript only native JavaScript is written.
1. Use JS to modify the label's Class attribute value:
The class attribute is one of the ways to refer to a style sheet on a label, its value is a stylesheet selector, and if the value of the class attribute is changed, the style sheet referenced by the label is replaced, so this is the first way to modify it.
The code to change the class attribute of a label is:
document.getElementById (id). ClassName = string;
document.getElementById (ID) is used to get the DOM object corresponding to the label, and you can also get it in other ways. ClassName is a property of a DOM object that corresponds to the class attribute of the label. A string is a new value for the class attribute and should be a defined CSS selector.
This approach allows you to replace the CSS style sheet of a label with a different one, or to apply a specified style to a label that does not have a CSS style applied to it.
Example:
Copy Code code 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. Use JS to modify the label's style attribute value:
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 attribute, but the property itself is an object, and the properties of the style object and the CSS property are one by one corresponding, and when the properties of the style object are changed, the CSS attribute value of the corresponding label changes, so this is the second method of modification.
The code to change the CSS properties of a label is:
document.getElementById (ID). style. property name = value;
document.getElementById (ID) is used to get the DOM object corresponding to the label, and you can also get it in other ways. Style is a property of a DOM object and 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, and it does not affect other CSS property values on the label.
Example:
Copy Code code 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 properties in Style.xxx
| Box label and property 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 properties control |
| 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 property 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 label and property control |
| 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 control |
| 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 |
