Home > Developer > JavaScript
A trinity page
The Structure of a webpage is created by HTML or XHTML;
The Presentation layer of a webpage is created by CSS;
Behavior is implemented by Javascript and DOM;
In fact, the presentation layer and behavior layer of a webpage always exist, even if the user does not define it. Because Web browsers load their default styles and events to the Web page structure layer.
B. Use the className attribute
Javascript can also flexibly change the CSS class selector of a tag element through the className attribute to achieve style changes.
Sample Code:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> append CSS Category </title>
<Style type = "text/css">
. MyUL1 {
Color: # 0000FF;
Font-family: Arial;
Font-weight: bold;
}
. MyUL2 {
Text-decoration: underline;
}
</Style>
<Script language = "javascript">
Function check (){
Var oMy = document. getElementsByTagName ("ul") [0];
OMy. className + = "myUL2"; // append the CSS class. Note the space before "myUL2.
}
</Script>
</Head>
<Body>
<Ul onclick = "check ()" class = "myUL1">
<Li> HTML </li>
<Li> JavaScript </li>
<Li> CSS </li>
</Ul>
</Body>
</Html>
When running, click the list and the <ul> class attribute changes:
<Ul onclick = "check ()" class = "myUL1 myUL2">
Note:
I> If the attribute value of className is directly modified, the CSS is replaced;
Ii> but the above Code does not overwrite the original CSS style, but appends the existing CSS style.
The premise of appending is to ensure that the appended CSS is not repeated with the original CSS;
Experience:
The difference in display between browsers is usually caused by the different default values of CSS attributes of each browser.
The common solution is: the programmer can specify the value by himself, instead of letting the browser use its default value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
