• 当前标签:位置

程序开发 尺寸和位置

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta http-equiv="X-UA-Compatible" content="ie=edge">         <title>尺寸和位置</title>         <style>             html,body{                 height: 100%;             }             section{                 width: 300px;                 height: 300px;                 background-color: red;                 margin: 100px auto;                 border: 20px solid blue;                 padding: 50px;                 position: relative;             }             button{                 position: absolute;                 top: 100px;                 left: 100px;                 border: 10px solid yellow;                 margin: 0;             }         </style>     </head>     <body>         <section>             <button>按钮</button>         </section>         <script>             var sec = document.querySelector('section')             // alert(sec.clientHeight)             // 获取元素的内高度 padding + content             // alert(sec.clientTop)             // border的尺寸             // alert(sec.getBoundingClientRect().bottom)             // 这个方法返回一个矩形对象,包含四个属性:left、top、right、bottom             // 分别表示元素各边与页面上边和左边的距离             var btn =document.querySelector('button')             // alert(btn.offsetHeight)             // 获取元素外高度 border + padding + content             // alert(btn.offsetTop)             // 获取元素上偏移量 相对与定位参考元素的距离             btn.offsetTop = '60px' //设置它的值是无效的             // 改变位置使用以下方式             btn.style.top = '200px'             btn.style.left = 'auto'             btn.style.right = '100px'             // alert(btn.offsetTop)             // sec.onclick = function(){             //     btn.scrollIntoView()             //     // 可以让标签元素滚动到窗口工作区上边缘             // }             btn.onclick =function(){                var popup =document.createElement('div')                popup.style.width = '100px'                popup.style.height = '100px'                popup.style.border = '2px solid yellow'                popup.style.position = 'absolute'                popup.style.top = btn.offsetTop + btn.offsetHeight + 5 + 'px'                popup.style.left = btn.offsetLeft + 'px'                sec.appendChild(popup)                var close =document.createElement('div')                close.style.width = '20px'                close.style.height = '20px'                close.style.backgroundColor = 'yellow'                close.style.position = 'absolute'                close.style.top = btn.offsetTop + btn.offsetHeight + 5 -10 + 'px'                close.style.left = btn.offsetLeft + popup.offsetWidth - 10 + 'px'                close.style.borderRadius = '50%'                close.innerText = 'X'                close.style.textAlign = 'center'                close.style.cursor = 'pointer'                sec.appendChild(close)                close.onclick =function(){                    sec.removeChild(popup)                    sec.removeChild(close)                }             }             // alert(document.documentElement.scrollTop)             // alert(document.documentElement.scrollLeft)                         // 页面滚动的距离 如果没有滚动则为0             // alert(document.documentElement.scrollHeight)             // alert(document.documentElement.scrollWidth)                         // 页面自身的高度和宽度             // 没有滚动条的时候 页面的宽度和高度等于窗口的宽度和高度             // 有滚动条的时候 页面的宽度和高度大于窗口的宽度和高度             // document.documentElement.scrollBy(100,100)             //  相对于当前位置滚动的距离             // document.documentElement.scrollTo(100,100)             // 滚动的距离(相当于滚动的起点)滚动到哪个位置             // window.scrollByPages(1) //按页滚动             // window.scrollByLines(1) //按行滚动             // alert(document.documentElement.clientHeight)             // alert(document.documentElement.clientWidth)             // 窗口工作区的宽度和高度             // alert(window.innerWidth)             // 窗口内宽度             // alert(window.outerWidth)             // 窗口的外宽度             // 外宽度 - 内宽度 = 滚动条 + 窗口边框             // alert(window.outerHeight)             // 窗口外高度             // alert(window.innerHeight)             // 窗口内高度             // 外高度 - 内高度 = 窗口标题栏 + 窗口工具栏             // alert(window.screen.width)             // 屏幕的总宽度             // alert(window.screen.height)                         // 屏幕的总高度             // alert(window.screenX)             // alert(window.screenY)             // 获取窗口左上角的坐标             alert(window.screen.availHeight)             // 屏幕可用高度(扣除任务栏)             alert(window.screen.availWidth)             // 屏幕可用宽度(扣除任务栏)         </script>     </body> </html> 推荐资料:JavaScript中的各种宽高属性

2017-07-18 00:23:58 26 0 0
阅读详情
  • 1
前往