Use JavaScript to write Dynamic HTML

Last Update:2017-02-28 Source: Internet

Author: User

Tags key window

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Javascript| News

Now we start using JavaScript to write dynamic html,javascript is a scripting language that is used as if it were writing a program. In fact, as long as we add <script language= "JavaScript" ></script> logo pairs to HTML files, we can write them in the logo pair. Now we'll take the example 3 in tutorial two to do the transformation and get the same effect. Take a look at the example below.

Example use mouse to trigger events and dynamic style sheets to change text

<title>dhtml examples 6</title>
<script language= "JavaScript" >
function Change_text () {
if (document.all.dragon.style.color== "Red") {
Document.all.dragon.style.color= "Green";
}
Else
{
Document.all.dragon.style.color= "Red";
}
}
</script>
<body>
<br>

</body>

In the example, function Change_text () is defined in the <script language= "JavaScript" ></script> flag pair, and when this function is called, the It will judge the color attribute in the Style property of the object Dragon, and if its colour value equals "Red", it will change its value to "green" (document.all.dragon.style.color= "green"), Otherwise, change its color value to "red" (document.all.dragon.style.color= "Red"). And the call to the Change_text () function is in the

Now it looks like it's going to be a lot easier to move the web. Careful readers will find the limitations of Example 6 because the Change_text () function can only color transform the Dragon object, and if you want to color the text of a series of objects (such as each line in the list), the code will increase. Don't worry, we'll fix it right away. To make the Change_text () function more versatile, I combine the CSS style sheet with JavaScript, which is much simpler and more convenient.

Example CSS style sheet combined with JavaScript to change text

<title>dhtml examples 7</title>
<style>
</style>
<script language= "JavaScript" >
function Change_text () {
if (window.event.srcelement.classname== "red") {
Window.event.srcelement.classname= "Blue";
}
Else
{
Window.event.srcelement.classname= "Red";
}
}
</script>
<body>
<br>

</body>

As you can see from the example above, I defined the red and blue two style classes in a CSS style sheet, and then in the Change_text () function, I changed the style class for the object that called the function, so that the color transformation was achieved. The key statement is window.event.srcelement.classname= "style class name", which enables the ClassName property of the object currently calling the function to change, if class= "red", when the Change_text () function is invoked, Its classname= "blue" and its style class becomes "blue".

Maybe you'll be in trouble because you want to add onmouseover and onmouseout events to each line of text, and I'll take care of the trouble immediately. Below is a good DHTML, please read it carefully.

Example to dynamically transform a list

<HTML>
<title>dhtml example 8</title>
<style>
Body { font-family: "Arial"; font-size:9pt}
. Color:gray;text-decoration:none}
. later {cursor:hand;color:blue; Text-decoration:underline}
</style>
<script language= "JavaScript"
Function Change_text () {
if (window.event.srcelement.classname== "a") {
Window.event.srcelement.classname= "later";
}
Else
{
Window.event.srcelement.classname= "a";
}
}
Document.onmouseover=change_text;
Document.onmouseout=change_text;
</script>
<body>
<br>
<ul>
<li class=first > Dynamic HTML (DHtml)
<li class=first > JavaScript
<li class=first > VBScript
<li class=first > Dynamic Server Page (ASP)
<li class=first > FrontPage98
<li class=first > InternetExplorer
<li class=first > SQL Server
</ul>
</body>

The special part of this example is the Blue Word section. The CSS style list first defines the style of the <body></body> logo pair (Body {font-family: "Arial"; font-size:9pt}), and then defines two other style classes, "primary" and "later". The text decoration in the first class is none, not decorated, while the later text decoration is underline, and a line is added, and the cursor attribute is also present in the later class, with a value of hand, which is the small hand that appears when the mouse moves to the Super link in the Web page. In addition to small hands, cursor can also take other values: default, Hand, move, crosshair, text, wait, help, Nw-resize, N-resize, Se-resize, Sw-resize, S-resize, W-resize, E-resize and Ne-resize.

Note that the statement document.onmouseover=change_text and Document.onmouseout=change_text are the key statements that we solve the problem mentioned above, They replace all onmouseover and onmouseout events in an HTML document.

You can design their own more good-looking, more dynamic DHTML to be afraid to do, it is afraid to imagine.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More