1,offset系列
通过style的方式获取属性值,只能获取在 标签中写的值(因为这个值没有单位)
offset 系列:
offsetWidth:获取元素的宽,没有单位
offsetHeight:获取元素的高,没有单位
offsetLeft:获取向左定位值
offsetTop:获取向上定位值
当父元素,子元素都没有脱离文档流时 offsetLef 为父盒子margin + 父padding + 父border + 子margin
当父盒子脱离文档流,这时子盒子无论脱不脱离文档流 offsetLeft的值 只等于子盒子的margin
(当父子的父盒子脱离文档流,父盒子有margin 这时 子盒子会继承margin)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offSet值分析</title>
<style>
* {
margin: 0;
padding: 0;
}
#boxF {
width: 200px;
height: 150px;
background-color: red;
position: relative;
/*left: 100px;*/
/*top: 50px;*/
margin:100px;
}
#boxS {
width: 100px;
height: 50px;
background-color: hotpink;
position: absolute;
margin: 60px;
padding:50px;
border: 1px solid black;
left:50px;
}
</style>
</head>
<body>
<div id="boxF">
<div id="boxS"></div>
</div>
<input type="button" value="按钮" id="btn">
<script src="public.js"></script>
<script>
/*
*
*
* 子元素和子元素都没有脱离文档流的时候
* 子元素的offsetLeft 的值:
* 父元素的margin + 父元素的padding + 父元素的border + 自己的margin
*
*
*子元素脱离文档流时offSetLef的值:
* 子元素的 left值 + 子元素margin (不会加padding 和 border)
*
*
*
* */
my$("btn").onclick = function () {
console.log(my$("boxS").offsetLeft);
}
</script>
</body>
</html>
2,scroll系列
offsetWidth:元素的宽(带边框)
scrollWidth:元素中内容实际的宽度
scrollTop:元素向上卷曲出去的距离
scrollLeft:元素向左卷曲出去的距离
//几种获取巻取值得方式
window.pageXOffset //ie8老版本不支持
document.documentElement.scrollLeft //ie支持
document.body.scrollLeft; //ie8支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll系列</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
border: 1px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div id="dv">
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
<P>p标签</P>
</div>
<input type="button" value="显示效果" id="btn">
<script src="public.js"></script>
<script>
/*
*
*
*
* offsetWidth:元素的宽(带边框)
*
*
* scrollWidth:元素中内容实际的宽度
*
*scrollTop:元素向上卷曲出去的距离
* scrollLeft:元素向左卷曲出去的距离
*
*
*
*
* */
my$('btn').onclick = function(){
// console.log(my$('dv').offsetWidth);//获取的是? 302 div的宽加边框
// console.log(my$('dv').scrollWidth);// 300 元素中内容的宽度
// console.log(my$('dv').scrollHeight);// 764 元素中内容的宽度
console.log(my$('dv').scrollTop);
}
</script>
</body>
</html>
//获取元素
document.body //获取body中的内容 不包括head
document.documentElement//获取的是所有内容 包括head
docuemnt.title 获得title文本对象
3,client系列
可是区域
clientWidth:可是区域的宽,不包括边框,是内部的宽高
clientHeight:可是区域的高,不包括边框,是边框的内部
clientLeft:左边框的宽度
clientTop上边框的宽度
clientX:可视区域的横坐标
client:可视区域的纵坐标