iframe用于创建内部窗口 .inner frame
视口
实际可见的内容可见区域。
offset：偏移，位移 哦符赛的
client：客户端 可兰因的
scroll：滚动 死阔肉
Fxxx off：滚
1.offsetWidth
定义：offsetWidth属性返回元素的宽度（没有单位），offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
不包含外边距
（可视内容宽 = width+padding + border ）：如果有滚动条
语法：
元素.offsetWidth
返回值：返回元素的布局宽度（没有单位），offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
实例：
<style>
div{
width: 200px;
height: 200px;
border: 50px solid black;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<div></div>
<script>
console.log(document.querySelector("div").offsetWidth)//400
</script>
2.offsetHeight
定义：返回元素的布局高度（没有单位），offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(Height)的值。
不包含外边距
（可视内容高 = width+padding + border ）：如果有滚动条
语法：
元素.offsetHieght
返回值：返回元素的布局高度（没有单位），包括内容，边框和内边距，滚动条，但不包括外边距。
实例：
3.clientWidth | clientHieght
定义：clientWidth属性返回元素的可视宽度（以像素为单位），包括填充，内边距，但不包括边框，外边距，滚动条。只读属性。
（可视内容宽 = width+padding - 滚动条）：如果有滚动条
语法：
元素.clientWidth
返回值：属性返回元素的可视内容宽度 | 高度（以像素为单位），包括填充，内边距，但不包括边框，外边距，滚动条。只读属性。
实例：
<style>
div{
width: 200px;
height: 200px;
border: 50px solid black;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<div></div>
<script>
console.log(document.querySelector("div").clientWidth)//300
</script>
4.scrollWidth || scrollHeight
定义：用于查询元素的内容宽 || 内容高
（全部宽度：可视宽(width+内边距)+不可视宽）不含滚动条
（全部高度：实际高(Height+内边距)+不可视宽）不含滚动条
- element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。
- element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。
语法：
元素.scrollWidth || scrollHeight
返回值：
实例：
<style>
div{
width: 200px;
height: 100px;
border: 10px solid black;
padding: 10px;
margin: 50px;
background-color: aquamarine;
/* overflow: auto; */
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector("div")
console.log(div.scrollWidth,div.scrollHeight)//220 120
</script>
innerWidth
定义：返回视口宽，包括滚动条
语法：
元素.innerWidth
返回值：返回视口宽，包括滚动条
实例：
<style>
div{
background-color: aquamarine;
width: 800px;
height: 2000px;
}
</style>
</head>
<body>
<div>
</div>
<script>
let v = window.innerWidth
document.querySelector("div").innerHTML = `<h1>${v}</h1>`
// document.onclick= function(){
// document.querySelector("div").innerHTML = `<h1>${v}</h1>`
// }
window.onresize = ()=>{
let v = window.innerWidth//内部宽（包含滚动条）
document.querySelector("div").innerHTML = `<h1>${v}</h1>`
}
</script>
offsetLeft || offsetTop
定义：
用于查询定位元素的坐标
offsetLeft：查询定为元素的水平坐标
offsetTop：查询定位元素的垂直坐标
语法：
定位元素.offsetLeft
定位元素.offsetTop
返回值：
返回一个数字（单位是像素）
getBoundingClientBox
返回元素在视口中的
查询元素尺寸
Element.offsetWidth || offsetHeight:布局尺寸
Element.clientHeight || clientWidth:可视内容宽度 视口尺寸
Element.scrollHeight || scrollWidth:可视加不可视 内容高
查询元素坐标（还有一个光标系统）
在浏览器中有两种坐标系统
视口坐标：以视口的左上角为坐标原点（0，0）的坐标系统
文档坐标：以文档的左上角为坐标原点、
查询视口坐标
Element.getBoundingClientRect()
定义： 用于查询元素的视口坐标，该函数返回一个矩形（DOMRect）对象，该对象有6个属性：top,lef,right,bottom,width,height；
语法：
元素.getBoundingClientRect()
没有参数
返回值：该函数返回一个矩形（DOMRect）对象，该对象有6个属性：top,lef,right,bottom,width,height；
实例：
<style>
div{
width: 100px;
height: 100px;
float: right;
background-color: cadetblue;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector("div")
console.log(div.getBoundingClientRect());//DOMRect { x: 1812, y: 8, width: 100, height: 100, top: 8, right: 1912, bottom: 108, left: 1812 }
</script>
实例2.0：查询div的x和y坐标
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div></div>
<script>
const div= document.querySelector("div")
const obj = div.getBoundingClientRect()
console.log(obj.x,obj.y)
</script>
查询元素文档坐标
- 方法1：利用offsetLeft和offsetTop查询
- 方法2：利用公式计算（文档坐标=视口坐标+文档滚动距离）window.scrollY+
Element.offsetTop || Element.offsetLeft
定义：
是一个只读属性，用于查询元素（定位或不定位）相对于offsetParent的坐标
offsetParent是什么
- 他最近的定位父级。（1.必须是父级元素2.必须设置定位属性 3.必须是最近的）
- body
语法：
非定位.offsetTop
定位.Top
返回值：返回没有单位的像素坐标
实例：
<nav class="md-nav" aria-label="查询设置内容的滚动尺寸">
</nav>
网友评论