a The Trinity page
The structure layer (Structure) of the Web page is created by HTML or XHTML;
The presentation layer of the Web page (presentation) is created by CSS;
The behavior layer (Behavior) of the Web page is accomplished by JavaScript and DOM;
In fact, the Web page's presentation layer and behavior layer always exist, even if the user does not define it. Because Web browsers load their default styles and events onto the structure layer of the Web page.
B using the ClassName property
Javascript can also change the style by changing the CSS class selector of a tag element flexibly by classname properties.
code example:
Copy Code code as follows:
<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 CSS class, note the space before "myUL2".
}
</script>
<body>
<ul onclick= "Check ()" class= "myUL1" >
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
At run time, after clicking the list, the <ul> class attribute actually changes to:
<ul onclick= "Check ()" class= "MyUL1 myUL2" >
Attention:
i > If it is directly modify the ClassName property value, it is to replace the CSS;
II > But the above code does not overwrite the original CSS style, but instead appends the existing CSS style.
Additional prerequisite is: to ensure that the additional CSS and the original CSS does not repeat;
Experience:
The differences that are displayed between browsers are usually caused by different browsers themselves that differ in their default values for CSS properties.
The usual solution is that the programmer specifies the value themselves, rather than letting the browser use its default values.
