sixteen 、client、offset、scroll series

1、client series

The code is as follows :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
position: absolute;
border: 10px solid red;
/*margin: 10px 0px 0px 0px;*/
padding: 80px;
}
</style>
</head>
<body>
<div class="box">
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
</div>
</body>
<script type="text/javascript">
/*
* clientTop The distance from the content area to the top of the border , To put it bluntly , It's the height of the border
* clientLeft The distance from the content area to the left of the border , To put it bluntly, it is the disorder of the border
* clientWidth Content area + about padding Visual width
* clientHeight Content area + Up and down padding Visual height
* */ var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight); </script> </html>

client

2. The visual area of the screen

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> // The visual area of the screen
window.onload = function(){ // document.documentElement What you get is html label
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// When the window size changes , This method is called
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
</html>

3.offset series

The code is as follows , The notes are very clear

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style> </head>
<body style="height: 2000px">
<div>
<div class="wrap" style=" width: 300px;height: 300px;background-color: green">
<div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box')
/*
offsetWidth Occupy a wide space Content +padding+border
offsetHeight High occupancy
* offsetTop: If the box is not positioned To body The distance from the top of , If the box is positioned , So it's based on the parents top value
* offsetLeft: If the box is not positioned To body The distance to the left of , If the box is positioned , So it's based on the parents left value * */
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight) } </script>
</html>

4.scroll series

The code is as follows :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{padding: 0;margin: 0;}
  </style>
</head>
<body style="width: 2000px;height: 2000px;">
  <div style="height: 200px;background-color: red;"></div>
  <div style="height: 200px;background-color: green;"></div>
  <div style="height: 200px;background-color: yellow;"></div>
  <div style="height: 200px;background-color: blue;"></div>
  <div style="height: 200px;background-color: gray;"></div>
  <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
    <p> Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
       Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
       Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
       Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha
    </p>
  </div>
</body>
<script type="text/javascript">
  window.onload = function(){
  // Implement monitoring rolling Events
  window.onscroll = function(){
// console.log(1111)
// console.log(' On '+document.documentElement.scrollTop)
// console.log(' Left '+document.documentElement.scrollLeft)
// console.log(' wide '+document.documentElement.scrollWidth)
// console.log(' high '+document.documentElement.scrollHeight)
  }   var s = document.getElementById('scroll');
  s.onscroll = function(){
// scrollHeight : The height of the content +padding No borders
  console.log(' On '+s.scrollTop)
  console.log(' Left '+s.scrollLeft)
  console.log(' wide '+s.scrollWidth)
  console.log(' high '+s.scrollHeight)
    }
  }
  </script>
</html>

JavaScript Basics ( Four ) More articles about

  1. JavaScript Foundation four

    1.13 Js Object orientation in 1.13.1 Several common ways to create objects 1. Use Object Or object literal quantity to create an object 2. Factory mode creates objects 3. Constructor mode creates objects 4. Prototypes create objects 1. Use Object or ...

  2. Javascript Foundation four ( Array , character , object , date )

    Section 1 : Array 1. The concept and definition of array      You can store a set of data :          When you need to manipulate multiple data : 2. How to create an array var arr1 = [1,2,3]; // Literal measure var arr2 ...

  3. JavaScript Basics ( Four ) - HTML DOM Event

    HTML DOM Event( event ) HTML 4.0 One of the new features of is the ability to make HTML Events trigger actions in the browser (action), For example, when a user clicks on a HTML Element to start a segment JavaScript. Next ...

  4. JavaScript Basics ( Four ) loop

    JavaScript There are two kinds of cycles , One is for loop , Through the initial conditions , End condition and increment condition to loop through the statement block : var x = 0; var i; for(i=1; i <=10000; i++){ ...

  5. JavaScript Foundation four

    Traversing the properties of an object for...in Statement is used to loop through the properties of an array or object . for ( Variable in Object name ) { Execute the code here } This variable is custom Comply with the naming convention But generally we It's all written as k Or k ...

  6. JavaScript Basics Study ( Four )

    JavaScript Basics Study ( Four ) Unbind event dom level Event unbundling ​ Elements .on Event type = null ​ Because of the assignment , So assign the event to null When ​ When the event is triggered , There is no event handling ...

  7. web The front-end study ( Four )JavaScript Learn the notes section (1)-- JavaScript Basic course

    1.JavaScript Basic course 1.1.Javascript Basics - Introduce . Realization . Output 1.1.1.JavaScript Is the most popular scripting language on the Internet , This language can be used for web and HTML, It can be widely used in the server .p ...

  8. JavaScript Basics

    JavaScript Basics JavaScript Is a programming language , Browser built in JavaScript The interpreter of language , So on the browser, press JavaScript The rules of the language to write the corresponding code , The browser can interpret and make corresponding comments ...

  9. Front end JavaScript Basics

    Front end JavaScript Basics Content of this section JS summary JS Basic grammar JS Cycle control ECMA object BOM object DOM object 1. JS summary 1.1. javascript history 1992 year Nombas Developed C ...

  10. Learn step by step javascript The basic chapter (3):Object、Function And so on

    We are < Learn step by step javascript The basic chapter (1): Basic concepts > Five basic data types are briefly introduced in Undefined.Null.Boolean.Number and String. Today we're going to talk about complexity ...

Random recommendation

  1. Swift2.3 --&gt; Swift3.0 The change of

    Swift3.0 Grammatical changes First of all, I would like to share with you the skills of learning new grammar :  use Xcode8 Open your own Swift2.3 Project , choice Edit->Convert->To Current Swift Synt ...

  2. windows Catalog selection File selection File Save dialog

    Open the file dialog const char pszFilter[] = _T("EXE File (*.txt)|*.txt|All Files (*.*)|*.*||"); CFile ...

  3. Wanwang cloud resolution sets the secondary domain name resolution to the same IP Different ports

    http://jingyan.baidu.com/article/eb9f7b6d8a02a5869364e827.html

  4. HttpContext by null new HttpContextWrapper(System.Web.HttpContext.Current)

    HttpContext = (context == null ? new HttpContextWrapper(System.Web.HttpContext.Current) : context);

  5. Application HBuilder Upload to GitHub

    Hbuilder install github plug-in unit As shown in the figure : One . Open yourself GitHub, Create a new one " library " 2. Set your own project name and profile 3. When it's finished , Will show GitHub To upload the path 4. open " ...

  6. My project : One chrome The birth of plug-ins , Name is jumper

    Course selection is a problem , In order to choose courses , Here's the story . In the beginning , Come up with the idea of 2013 year 7 month . Then I learned about it online chrome The structure of knowledge , It turns out that the example is false . Fortunately, there is an open source plug-in with the same function of elder martial brother , But the code is messy , I like logic ...

  7. Qt The transformation of programming into 8,16bit The gray image

    The code looks like this . yes 8bit The gray image , No 16bit. QString img_path = "C:\\Users\\Yajun Dou\\Desktop\\test.bmp" ...

  8. .NET Core 2.0

    download Visual Studio 2017 version 15.3 download .NET Core 2.0 download Visual Studio for Mac Microsoft today released .NET Core 2.0 edition ...

  9. Individual Project &quot; Write a program that can automatically generate four arithmetic questions in primary school &quot;

    One . Introduction to the topic Write a program that can automatically generate four arithmetic questions in primary school . After the preliminary formulation of the functions to be realized , Estimate how long it will take . Record how long you actually spent in the programming process . Then compare the function of each program with the students . The similarities and differences of implementation methods and so on ...

  10. How are the interviewers of Internet companies 360&#176; There is no dead end to investigate the candidates ?[z]

    [z]https://juejin.im/post/5c0e47ebf265da614e2be9a7 One . Write it at the front Recently received many readers' feedback , I'm applying for a job with some medium and large Internet companies Java When I was working as an engineer, I met some problems ...