js 三大家族（offset/scroll/client）

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>js 三大家族（offset/scroll/client）</title><style>.box1 {width: 300px;height: 300px;padding: 100px;margin: 100px;position: relative;border: 100px solid #000;background-color: pink;}.box2 {width: 100px;height: 100px;background-color: red;}</style>
</head>
<body>
<div class="box1"><div class="box3"><div class="box2" style="left: 10px">桃花屋下桃花仙桃花仙人种桃树右宅桃花换酒钱桃花屋下桃花仙桃花仙人种桃树右宅桃花换酒钱</div></div>
</div><script>var box1 = document.getElementsByClassName("box1")[0];var box2 = document.getElementsByClassName("box2")[0];//--------------------------- 第一家族：方便的offset家族 ---------------------//offset:偏移，补偿，位移的意思 偏移的距离。//offsetHeight和offsetWidth: 可以检测盒子的宽高。//包括宽高本身，padding，border。不包括margin//offsetHeight = height+padding+border;(不加margin)//offsetWidth = width+padding+border;(不加margin)console.log(box1.offsetHeight);console.log(box1.offsetWidth);//offset..和style.. 区别//    一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。//          如果父系盒子中都没有定位，以body为准。//        style.left只能获取行内式，如果没有返回“”;//    二、offsetTop 返回的是数字，而 style.top 返回的是字符串，XXpx。//          div.offsetLeft = 100;    div.style.left = "100px";//    三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）//          style.left和style.top可以赋值//          offsetLeft和offsetTop只能获取值//    四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。//          style.left只能获取行内式，如果没有返回“”;console.log(box2.offsetLeft);// 返回值不带pxconsole.log(box2.offsetTop);console.log(box2.style.left);//只能获取行内样式 带有pxconsole.log(box2.style.top);//offsetParent：//返回最近的带有定为的父盒子(父盒子有定位)//父盒子没有定位就返回bodyconsole.log(box3.offsetParent);//--------------------------- 第二家族：scroll家族 -----------------------------//scroll:是--卷页，卷曲的意思 (被卷曲了多少)//scrollWidth和scrollHeight不包括border和margin//scrollWidth = width + padding;// 不包括 border和margin;//高度特点：如果文字超出了盒子，高度为超出盒子的内容的高。不超出是盒子本身高度//IE8以下，不包括IE8为盒子本身内容的多少。console.log(box1.scrollWidth);console.log(box1.scrollHeight);window.onscroll = function () {console.log(scroll().top);console.log(scroll().left);}function scroll(){//如果这个属性存在，那么返回值应该是0-无穷大//如果没有返回值是undefined；//只要判断不是undefined就可以调用此方法//练习使用此种封装if(window.pageYOffset !== undefined){return {"top": window.pageYOffset,"left": window.pageXOffset};}else if(document.compatMode === "CSS1Compat"){return {"top": document.documentElement.scrollTop,"left": document.documentElement.scrollLeft};}else{return {"top": document.body.scrollTop,"left": document.body.scrollLeft};}//简单封装（实际工作使用）
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }}//--------------------------- 第二家族：client家族 -----------------------------</script></body>
</html>

js 三大家族（offset/scroll/client）相关推荐

js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
DOM获取元素位置的三大系列offset/scroll/client
2019独角兽企业重金招聘Python工程师标准>>> 我们使用元素.style.left在style标签中设置的样式的值都获取不到. 现在就说一下三大系列吧,首先明确documen ...
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
原生JS中的三大家族（offset/scroll/client）与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
offset;scroll;client
DOM元素对象的属性/方法之offset(Height,Width,Left,Parent,Top);scroll(Height,Width,Left,Top);client(Height,Width ...
三大家族scroll、offset、client
三大家族scroll.offset.client JS的三大家族主要是Offset.Scroll.Client,通过对三大家族不同属性的灵活使用,我们可以模拟出很多炫酷的JS动画,增强界面的视觉感染力 ...
BOM对象及offset、client、scroll三大家族
文章目录 BOM对象 1. location 对象 location 对象的常用属性案例 location对象的常见方法 2. navigator对象 3.history对象 history对象常 ...
.net label在父容器中占两行显示_十分钟快速了解 JS 中的 offset、scroll、client
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
JavaScript基础——滚动事件、加载事件、三大家族
文章目录一.滚动事件和加载事件 1.1 滚动事件 1.2 加载事件二.三大家族 2.1 scroll家族 2.2 offset家族 2.3 client家族一.滚动事件和加载事件 1.1 滚动事 ...

js 三大家族（offset/scroll/client）

js 三大家族（offset/scroll/client）相关推荐

最新文章

热门文章