Modify CSS properties with JavaScript __java

Currently, most formats on a Web page are defined using CSS and rarely use HTML attributes, so changing CSS properties with a program can have a richer effect.

JavaScript allows you to modify the CSS properties that are set by HTML tags so that you can change the style of the labels.

There are two main ways to modify a label's style with javascript: one is to use another CSS style sheet instead of a label now CSS style sheet, and second, directly modify the label of the CSS style sheet properties.

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: <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>

The effect is: Welcome to visit.

In this example, the button is used to call the JS function, in the JS function, the <div id= "tt" > tag set the class attribute value, the. txt style is applied to the label.

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 property 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.

Note: The property names and CSS property names for most style objects are different names, and the property names of the style object are case-sensitive.

For example, the CSS font-size attribute corresponds to the FontSize property of the Style object, and the Margin-top property of the CSS corresponds to the MarginTop property of the Style object.

For example: <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>

The effect is: Welcome to visit.

As you can see, although the properties of some Style objects do not have the same name as CSS properties, the value method is exactly the same, so we can modify the CSS property values of a tag in this way.

Appendix: Style Object

A Style object is a child of a DOM object, and each of its properties corresponds to the properties of the CSS. The style object is referenced by: Dom object. Style.style Property Name The difference between a Style object's properties and a CSS property is: The Style property is case-sensitive, and the CSS property is case-insensitive. The Style property named by a single word has the same name as the CSS property. such as: color, border, margin, width, height and so on. With only one exception, the Style attribute for the float property of the CSS is stylefloat or cssfloat. A Style property named by more than one word is the first word lowercase, followed by the first letter of the word capitalization. CSS properties are separated by "-" between words. For example: font-family corresponds to the fontfamily,background-image corresponding to the backgroundimage,border-top-width corresponds to borderTopWidth. Use JS program to modify the style of the page: Document.body.style.Style attribute name = value; Document.body corresponds to the <body> tag of the document, and its style affects the style of the entire page. such as: <script type= "Text/javascript" > document.body.fontFamily = "Song Body"; Document.body.fontSize = "16px"; document.body.backgroundImage = "url (./image/bg.gif)"; </script> Use JS program to modify the style of the label: document.getElementById (ID). style. Style property name = value; The document.getElementById (ID) is used to get the label with the specified ID, and its style only affects the style of the tag. such as: <div id= "Mark" ></div> <script type= "Text/javascript" > document.getElementById ("Mark"). Width = "40%"; document.getElementById ("Mark"). TextAlign = "center"; </script>