Introduction and use of Python Dom day2

5. Position
　　1. clientHeight Visible area: height + padding
　　2. clientTop border height

　　3.offsetHeight Visible area: height + padding + border
　　4.offsetTop Height from the parent positioning label

　　5.scrollHeight Full text height: height + padding
　　6.scrollTop scroll High

　　PS: Google Chrome uses document.body.scrollTop to display 0 all the time, so using document.documentElement.scrollTop is
　　related to the <! DOCTYPE html> at the beginning of the program. The difference between scrollTop in each browserOriginal link: https: // blog. csdn.net/sleepwalker_1992/article/details/80677845
　　　　IE:
　　　　　　For pages without doctype declaration, use document.body.scrollTop or document.documentElement.scrollTop;
　　　　　　for pages with doctype declaration, use document.documentElement.scrollTop;

　　　　Chrome, Firefox:
　　　　　　For pages without doctype declaration, use document.body.scrollTop to get the scrollTop height;
　　　　　　 For pages with doctype declaration, use document.documentElement.scrollTop;

　　　　Safari:
　　　　　　 safari is special, and has its own function to get scrollTop: window.pageYOffset;

　　　　Window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft can be taken together Analyzing
　　
6. The submission form
is <input type = 'submit' value = ' Submit'> before to submit this form form
can now Use DOM to submit
as

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <form id="i1">
                <input type="text">
                <input type="submit"value="提交">
                <a onclick="Submit()">提交</a>
            </form>

            <script>
                function Submit() {
                    var tag=document.getElementById('i1');
                    tag.submit();
                }
            </script>
        </body>
        </html>

example

7. Other operations
　　1.console.log () output box, output the content in brackets to the web page
　　2.alert () pop-up box
　　3.confirm () confirmation box, there is a return value, false or true
　　 // URL and Refresh
　　4.location.href Get URL
　　5.location.href = "URL" Redirect
　　6.location.reload () Reload
　　 // Timer:
　　7.setInterval multiple timer
　　8.clearInterval
　　9.setTimeOut single timer
　　10.clearTimeOut
8. Event binding
　　special events:
　　　　1.this, point to the label of the current trigger event 2.Global
　　　　event binding window.onkeydown = function () {}
　　　　3.event, special parameters, including event related content (with The previous pygame events are similar)
　　　　4. The default events are
　　　　 as follows: (a tag, jump) (submit tag, submit) ...
　　　　　　If you bind the event, execute the custom event first, then execute the default event
　　　　　　<input type = "submit" value = "Submit" onclick = "return Submit ()">
　　　　　　If return is added, the subsequent Submit () function will execute the subsequent events if it is true, and will not execute if it is false
　　　　(checkbox, check) ..
　　　　　　If binding events, execute the default event first, and then execute the custom event

Example : Like
1.this, point to the current trigger event label, function (this), you can pass in this label
2.setInterval (anonymous function, time unit ms) Create a timer, it will return a value, inter = setInterval ()
3. ClearInterval delete timer, pass in the value returned during creation, clearInterval (inter)
4. removeChild delete child label

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .item{
 8             padding: 50px;
 9             position: relative;
10         }
11         .item span{
12             position: absolute;
13             top: 42px;
14             left: 83px;
15             opacity: 1;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="item">
21         <a onclick="f1(this)">赞!</a>
22     </div>
23     <div class="item">
24         <a onclick="f1(this)">赞!</a>
25     </div>
26     <div class="item">
27         <a onclick="f1(this)">赞!</a>
28     </div>
29     <div class="item">
30         <a onclick="f1(this)">赞!</a>
31     </div>
32     <script>
33         function f1(ths) {
34             var top=42;
35             var left=83;
36             var op=1;
37             var fontSize=18;
38             var tag = document.createElement('span');
39             tag.innerText='+1';
40             tag.style.top=top+'px';
41             tag.style.left=left+'px';
42             tag.style.fontSize=fontSize+'px';
43             tag.style.opacity=op;
44             ths.parentElement.appendChild(tag);
45 
46             var inter=setInterval(function ()
47                 {
48                 top-=10;
49                 left+=10;
50                 op-=0.1;
51                 fontSize+=5;
52                 tag.style.top=top+'px';
53                 tag.style.left=left+'px';
54                 tag.style.fontSize=fontSize+'px';
55                 tag.style.opacity=op;
56                 if (op<=0.2){
57                     clearInterval(inter);
58                     ths.parentElement.removeChild(tag)
59                              }
60                 }
61             ,50)
62         }
63     </script>
64 </body>
65 </html>

Like example

Introduction and use of Python Dom day2

Guess you like