js里取容器大小、定位、距离等属性搜集整理

element.clientWidth　　 //元素的实际宽度,不算边框

element.clientHeight　　//元素的实际高度,不算边框

element.offsetWidth　　 //元素的实际宽度,加上边框

element.offsetHeight　　//元素的实际高度,加上边框

element.scrollWidth　　//这个说法很多，我测试下来应该是元素实际宽度-滚动条的宽度

element.scrollHeight　　//这个说法很多，我测试下来应该是元素实际高度-滚动条的高度

element.offsetLeft　　 //相对于父对象的距离,ie下如果position设为relative,则是相对于window的距离

element.offsetTop　　 //相对于父对象的距离,ie下如果position设为relative,则是相对于window的距离

window.screenLeft　　 //当前窗口距离屏幕距离 only for IE

window.screenX　　 //当前窗口距离屏幕距离 not for IE

window.innerWidth　　//当前窗口大小（内）not for IE

window.outerWidth　　//当前窗口大小（外）not for IE

window.screen.width //当前屏幕分辨率

window.screen.availWidth //当前屏幕可用分辨率

赞 (0)

相关推荐

  • js里取容器大小、定位、距离等属性搜集整理

    element.clientWidth //元素的实际宽度,不算边框 element.clientHeight //元素的实际高度,不算边框 element.offsetWidth //元素的实际宽度,加上边框 element.offsetHeight //元素的实际高度,加上边框 element.scrollWidth //这个说法很多,我测试下来应该是元素实际宽度-滚动条的宽度 element.scrollHeight //这个说法很多,我测试下来应该是元素实际高度-滚动条的高度 eleme

  • JS中位置与大小的获取方法

    JS中位置与大小的获取方法

    scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大. clientHeight:DOM元素内容可视区的高度,不包含滚动条和边框的高度. offsetHeight:DOM元素整体的高度,包括滚动条和边框. 当滚动条不出现的时候 这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth=clientWidth,两者皆为可

  • js实现文章文字大小字号功能完整实例

    本文实例讲述了js实现文章文字大小字号功能的方法.分享给大家供大家参考.具体分析如下: 文字大中小是很多网站供用户阅读方便的一个功能,本文实例介绍的文字大中小字号功能可以在用户选择之后打开只要在同网站打开另一篇文章都会根据用户习惯来显示字体大小. 大家一定在某些大型网站看到过文章标题下三个按钮 "大"."中"."小",用来照顾不同人的阅读习惯.这里我就要介绍这种方法,而且比它们的还支持自动保存哦~只要选择一次,下次阅读自动调整到喜欢的字号. JS

  • Fullpage.js固定导航栏-实现定位导航栏

    Fullpage.js固定导航栏-实现定位导航栏

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工

  • 在js里怎么实现Xcode里的callFuncN方法(详解)

    本人使用的WebStorm编辑器,里面没有callFuncN, 不记得Lua是否支持callFuncN,如果不支持相信应该能用同样的方法做到. 废话不多说,贴代码: loadDown : function () { var dis = this.left_move.getPositionY() - this.left.getPositionY(); // 得到一个距离 var act1 = new cc.moveBy(0.5,cc.p(0,-dis)); var act2 = cc.callFu

  • vue实现在表格里,取每行的id的方法

    如下所示: 1.在template上写上 slot-scope="scope" 2.然后在template里边的标签上,scope.row.id 以上这篇vue实现在表格里,取每行的id的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue.js+Element实现表格里的增删改查

  • Node.js服务Docker容器化应用实践小结

    本篇不会讲解 Docker 命令的使用.安装等,因为在之前一篇文章一文零基础教你学会 Docker 入门到实践中也已经讲解的很详细了,不清楚的可以点击链接回头在重新看下,本篇重点是介绍 Node.js 项目如何进行 Docker 容器化及一些实践优化,还有一些常见的问题,当然如果还有其它使用上的问题也欢迎大家在评论区进行留言补充. 作者简介:五月君,Nodejs Developer,热爱技术.喜欢分享的 90 后青年,公众号「Nodejs技术栈」,Github 开源项目 www.nodejs.r

  • vue实现拖动调整左右两侧容器大小

    vue实现拖动调整左右两侧容器大小

    本文实例为大家分享了vue实现拖动调整左右两侧容器大小的具体代码,供大家参考,具体内容如下 页面布局 <template>     <a-layout class="width-auto" id="product">         <div class="content">             <div id="left" class="left">  

  • js 只比较时间大小的实例

    实例如下: <script> ///比较函数 function compareTime(date1, date2) { var d1_year, d1_month, d1_day, d1, time_span1, d2_year, d2_month, d2_day, d2, time_span2; d1_year = date1.getFullYear(); d1_month = date1.getMonth() + 1; d1_day = date1.getDate(); d1 = new

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

随机推荐