尺寸和位置

黄良钵

分类: 程序开发 44 0

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>尺寸和位置</title>
  8.         <style>
  9.             html,body{
  10.                 height: 100%;
  11.             }
  12.             section{
  13.                 width: 300px;
  14.                 height: 300px;
  15.                 background-color: red;
  16.                 margin: 100px auto;
  17.                 border: 20px solid blue;
  18.                 padding: 50px;
  19.                 position: relative;
  20.             }
  21.             button{
  22.                 position: absolute;
  23.                 top: 100px;
  24.                 left: 100px;
  25.                 border: 10px solid yellow;
  26.                 margin: 0;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <section>
  32.             <button>按钮</button>
  33.         </section>
  34.         <script>
  35.             var sec = document.querySelector('section')
  36.             // alert(sec.clientHeight)
  37.             // 获取元素的内高度 padding + content
  38.             // alert(sec.clientTop)
  39.             // border的尺寸
  40.             // alert(sec.getBoundingClientRect().bottom)
  41.             // 这个方法返回一个矩形对象,包含四个属性:left、top、right、bottom
  42.             // 分别表示元素各边与页面上边和左边的距离
  43.             var btn =document.querySelector('button')
  44.             // alert(btn.offsetHeight)
  45.             // 获取元素外高度 border + padding + content
  46.             // alert(btn.offsetTop)
  47.             // 获取元素上偏移量 相对与定位参考元素的距离
  48.             btn.offsetTop = '60px' //设置它的值是无效的
  49.             // 改变位置使用以下方式
  50.             btn.style.top = '200px'
  51.             btn.style.left = 'auto'
  52.             btn.style.right = '100px'
  53.             // alert(btn.offsetTop)
  54.             // sec.onclick = function(){
  55.             //     btn.scrollIntoView()
  56.             //     // 可以让标签元素滚动到窗口工作区上边缘
  57.             // }
  58.             btn.onclick =function(){
  59.                var popup =document.createElement('div')
  60.                popup.style.width = '100px'
  61.                popup.style.height = '100px'
  62.                popup.style.border = '2px solid yellow'
  63.                popup.style.position = 'absolute'
  64.                popup.style.top = btn.offsetTop + btn.offsetHeight + 5 + 'px'
  65.                popup.style.left = btn.offsetLeft + 'px'
  66.                sec.appendChild(popup)
  67.                var close =document.createElement('div')
  68.                close.style.width = '20px'
  69.                close.style.height = '20px'
  70.                close.style.backgroundColor = 'yellow'
  71.                close.style.position = 'absolute'
  72.                close.style.top = btn.offsetTop + btn.offsetHeight + 5 -10 + 'px'
  73.                close.style.left = btn.offsetLeft + popup.offsetWidth - 10 + 'px'
  74.                close.style.borderRadius = '50%'
  75.                close.innerText = 'X'
  76.                close.style.textAlign = 'center'
  77.                close.style.cursor = 'pointer'
  78.                sec.appendChild(close)
  79.                close.onclick =function(){
  80.                    sec.removeChild(popup)
  81.                    sec.removeChild(close)
  82.                }
  83.             }
  84.             // alert(document.documentElement.scrollTop)
  85.             // alert(document.documentElement.scrollLeft)            
  86.             // 页面滚动的距离 如果没有滚动则为0
  87.             // alert(document.documentElement.scrollHeight)
  88.             // alert(document.documentElement.scrollWidth)            
  89.             // 页面自身的高度和宽度
  90.             // 没有滚动条的时候 页面的宽度和高度等于窗口的宽度和高度
  91.             // 有滚动条的时候 页面的宽度和高度大于窗口的宽度和高度
  92.             // document.documentElement.scrollBy(100,100)
  93.             //  相对于当前位置滚动的距离
  94.             // document.documentElement.scrollTo(100,100)
  95.             // 滚动的距离(相当于滚动的起点)滚动到哪个位置
  96.             // window.scrollByPages(1) //按页滚动
  97.             // window.scrollByLines(1) //按行滚动
  98.             // alert(document.documentElement.clientHeight)
  99.             // alert(document.documentElement.clientWidth)
  100.             // 窗口工作区的宽度和高度
  101.             // alert(window.innerWidth)
  102.             // 窗口内宽度
  103.             // alert(window.outerWidth)
  104.             // 窗口的外宽度
  105.             // 外宽度 - 内宽度 = 滚动条 + 窗口边框
  106.             // alert(window.outerHeight)
  107.             // 窗口外高度
  108.             // alert(window.innerHeight)
  109.             // 窗口内高度
  110.             // 外高度 - 内高度 = 窗口标题栏 + 窗口工具栏
  111.             // alert(window.screen.width)
  112.             // 屏幕的总宽度
  113.             // alert(window.screen.height)            
  114.             // 屏幕的总高度
  115.             // alert(window.screenX)
  116.             // alert(window.screenY)
  117.             // 获取窗口左上角的坐标
  118.             alert(window.screen.availHeight)
  119.             // 屏幕可用高度(扣除任务栏)
  120.             alert(window.screen.availWidth)
  121.             // 屏幕可用宽度(扣除任务栏)
  122.         </script>
  123.     </body>
  124. </html>

推荐资料:JavaScript中的各种宽高属性

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、位置、尺寸

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “尺寸和位置”

Loading...