Home > Developer > JavaScript

Record my journey 6 JavaScript Dom Study Notes

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

Next we will go on journey 5 to continue our JavaScript Dom journey 6. Through this blog study, we can easily change the operation layer, in this blog post, I also used many small examples to illustrate every point I mentioned, such as displaying the hidden layer, the width and height of the dynamic loading layer, and a small example of flying with the mouse. Learning is a trigger, so when we take this off, we can expand and write many examples that are frequently used on Web pages.

  1. Programming Control Layer

(1) display of control layer

Modify style. display. For example, display the switch layer.

<Script type = "text/javascript">

Function toggelDiv (cb ){

Var div1 = document. getElementById ("div1 ");

If (cb. checked ){

Div1.style. display = ""; // display is displayed if no value exists.

}

Else {

Div1.style. display = 'none'; // none is not displayed

}}

</Script>

</Head>

<Body>

<Input type = "checkbox" id = "cbShow" onclick = "toggelDiv (this)"/>

<Label id = "cbShow1"> display advanced options </label>

<Div id = "div1" style = "display: none"> Han Yinglong </div>

</Body>

(2) Case 1: When the mouse is placed on a hyperlink, a yellow background is displayed, and the floating prompt with an image disappears when the mouse leaves. The prompt is: onmouseover, the exit event is onmouseout.

<A href = "http://www.cnblogs.com" onmouseout = "document. getElementById ('budiv '). style. display = 'none '"

Onmouseover = "document. getElementById ('budiv '). style. display ='' "> blog </a>

<Div id = "buDiv" style = "display: none; border-color: Green; border-style: dotted; border-width: 1px;">

<Font color = "red"> Han Yinglong </font> be sure to study. NET. </div>

(3) event range of body in IE

In IE, if onclick, onmousemove, and other event responses are added to the body, if the page is not full, "the last element in the body (horizontal) is not limited) ", you must use the code to listen to those events on the document, such as: document. onmousemove = MovePic;

(1) <body onclick = "alert ('hello')">

Han Yinglong <br/>

</Body>

(2) <script type = "text/javascript">

Function body (){

Alert ('hell0 ');

}

Document. onclick = body;

</Script>

  1. Element location, size unit

(1) read the top, left, width, and height values of an element through the Dom. The obtained values are not numbers, but strings like "10px, for these attributes, the value of IE can be numbers such as 80 and 90, and FF must be strings such as "80px" and "90%". For compatibility, the uniform character string format is used.

(2) If you want to modify the size of an element (the width is increased by 10), you must first retrieve the width of the element and then convert the width to a number using ParseInt, parseInt can resolve strings with other content starting with a number such as "20px" to 20, parseInt ("20px", 10), that is, parsing as many parts as possible, then add a value and the px value.

<Script type = "text/javascript">

Function incWidth (){

Var oldwidth = document. getElementById ('did1'). style. width;

Oldwidth = parseInt (oldwidth, 10 );

Oldwidth + = 50;

// Oldwidth = oldwidth + 50; // 50px50

Document. getElementById ("div1"). style. width = oldwidth;

}

</Script>

<Input type = "button" value = "unit" style = "width: 50%"/>

<Div id = "div1" style = "width: 50px; height: 50px; border-style: dotted; border-width: 1px; border-color: Red"> learn more. NET </div>

<Input type = "button" onclick = "alert (document. getElementById ('div1 '). style. width)" value = "value"/>

<Input type = "button" onclick = "document. getElementById ('div1 '). style. width = '100px'" value = "Set value"/>

<Input type = "button" onclick = "incWidth ()" value = "auto-widening"/>

<Input type = "button" onclick = "alert (parseInt ('50px50px ', 10)" value = "ParseInt"/>

  1. Layer operations

(1) position style values of elements: static (no positioning, displayed in the default position), absolute (absolute positioning), and fixed (fixed Positioning Relative to the window, location will not change with the flow of the browser, IE6 does not support), relative (relative to the default location of the element), if you want to modify the coordinates of the element through code, usually use absolute, then, modify the top (top edge distance) and left (left edge distance) style values of the element.

<Input type = "button" value = "button" style = "position: absolute; top: 200px; left: 200px"/>

(2) Case 1: Move the image following the mouse, prompting that the event of moving the mouse is onmousemove (triggered by moving the event, rather than starting or finishing the move), through the window. the clientX and clientY attributes of the event get the cursor position.

<Script type = "text/javascript">

Document. onmousemove = function (){

Var x = window. event. clientX;

Var y = window. event. clientY;

Var divFly = document. getElementById ("divFly ");

If (! DivFly ){

Return;

}

DivFly. style. left = x; // left, top indicates the coordinates of the upper left corner of the layer.

DivFly. style. top = y;

}

</Script>

<Body>

<Input type = "button" value = "button" style = "position: absolute; top: 200px; left: 200px"/>

<Div id = "divFly" style = "position: absolute">

<br/> I am, you guess?

</Div>

</Body>

(3) Case 2: When the mouse is placed in a hyperlink, a yellow background is displayed at the mouse position, with a floating prompt of the image. The cursor disappears when it leaves, prompting: the event where the mouse enters the control is onmouseover, and the event when the mouse leaves the control is onmouseout.

<Style type = "text/css">

. Tooltip {

Background-color: Yellow;

Border-style: solid;

Border-width: 1px;

Border-color: Red;

}

</Style>

<Script type = "text/javascript">

Function initEvent (){

Var links = document. getElementsByTagName ("");

For (var I = 0; I <links. length; I ++ ){

Var link = links [I];

Link. onmouseover = LinkMouseOver;

Link. onmouseout = LinkMouseOut;

}

}

Function LinkMouseOver (){

Var div = document. createElement ("div"); // dynamically create a Layer

Div. className = "tooltip"; // set the style to be beautiful. The second function is to facilitate LinkMouseOut to locate the layer.

Div. style. position = "absolute ";

Div. style. top = window. event. clientY; // specify coordinates

Div. style. left = window. event. clientX;

Div. innerHTML = "frequently viewed websites <font color = 'red'> Han Yinglong </font> ";

Document. body. appendChild (div); // createElement is only a memory model and only appendChild is displayed in a visible element.

}

Function LinkMouseOut () {// hide or delete the layer when the mouse leaves.

Var divs = document. getElementsByTagName ("div ");

For (var I = 0; I <divs. length; I ++ ){

Var div = divs [I];

If (div. className = "tooltip") {// hide or delete the layer of class = 'tooltip'

Document. body. removeChild (div );

// Div. style. display = "none"; // Memory leakage may occur if it is hidden.

}

}

}

</Script>

<Body onload = "initEvent ()">

<A href = "http://www.cnblogs.com"> blog </a> <br/>

<A href = "http://www.baidu.com"> Baidu </a> <br/>

<A href = "http://www.sina.com"> Sina </a>

</Body>

(4) Case 3: click the button layer to dynamically increase. Tip: the trap that continuous English words do not wrap automatically

<Script type = "text/javascript">

Var showIntervalId;

Function showDiv (){

ShowIntervalId = setInterval ("inc ()", 10 );

}

Function inc (){

Var div1 = document. getElementById ("div1 ");

Var oldwidth = div1.style. width;

Oldwidth = parseInt (oldwidth, 10 );

Var oldheight = div1.style. height;

Oldheight = parseInt (oldheight, 10 );

If (oldwidth & gt; = 200 ){

ClearInterval (showIntervalId );

}

Oldwidth + = 10;

Oldheight + = 10;

Div1.style. width = oldwidth + "px ";

Div1.style. height = oldheight + "px ";

}

</Script>

<Div id = "div1" style = "width: 10px; height: 100px; border-style: solid; border-color: Red; border-width: 1px;">

Chuang Tzu dreamed of becoming a butterfly, and butterfly dreamed of becoming Chuang Tzu. The old father of Chen slept for eight hundred years. He slept in the Prosperous Qing dynasty of Song Dynasty, and Su qier slept in mengmeng Middle School...

Chuang Tzu dreamed of becoming a butterfly, and butterfly dreamed of becoming Chuang Tzu. The old father of Chen slept for eight hundred years. He slept in the Prosperous Qing dynasty of Song Dynasty, and Su qier slept in mengmeng Middle School...

</Div>

<Input type = "button" value = "zoom in" onclick = "var div1 = document. getElementById ('div1 ');

Div1.style. width = '200px '; div1.style. height = '200px' "/>

<Input type = "button" value = "dynamic amplification" onclick = "showDiv ()"/>

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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