文档章节

js获取html元素的宽度高度及相对位置

老王哥哥
 老王哥哥
发布于 2017/08/31 10:22
字数 257
阅读 1
收藏 0
点赞 0
评论 0

精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 

scrollWidth:获取对象的滚动宽度 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

event.clientX 相对文档的水平座标 

event.clientY 相对文档的垂直座标 

event.offsetX 相对容器的水平坐标 

event.offsetY 相对容器的垂直坐标 

document.documentElement.scrollTop 垂直方向滚动的值 

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

© 著作权归作者所有

共有 人打赏支持
老王哥哥
粉丝 0
博文 16
码字总数 9532
作品 0
德阳
Javascript获取div真实高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中,...

easonjim ⋅ 2016/12/28 ⋅ 0

移动端自适应布局&微信小程序rpx

rpx是微信小程序推出的一个新单位,通过rpx可以让我们的页面根据屏幕宽度进行自适应,这一举措解决了一直令前端头疼的屏幕适配问题。 而在rpx出现之前,web页面的自适应布局已经有前人总结了...

小草先森 ⋅ 06/16 ⋅ 0

JavaScript获取浏览器、元素、屏幕的宽高尺寸

JavaScript获取浏览器、元素、屏幕的宽高尺寸 前言 有时候在获取浏览器、元素、屏幕的尺寸,傻傻分不清。为了让自己清晰认识,能够快速确定自己需要哪个属性,现在把这些尺寸属性整理了一下。...

优惠券活动 ⋅ 05/19 ⋅ 0

jquery获取父窗口的元素

jquery获取父窗口的元素 取父窗口的元素方法:$(selector, window.parent.document);取父窗口的元素方法:$(selector, parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector,...

壹峰 ⋅ 2016/12/06 ⋅ 0

js笔记十七之DOM操作-增删改

DOM的赠删改 增 真是项目中, 我们会在js中动态创建一些html标签, 然后把其增加到页面中 document.createElement 在js中动态创建一个html标签 appendChild 容器.appendChild(新元素) 把当前创...

uplyw ⋅ 05/11 ⋅ 0

小程序之图片瀑布流(最全实现方式,额外加送懒加载)

效果图 来来来,看啊看,外面的世界多好看, 效果图展示的是瀑布流布局 && 懒加载的效果 数据 图片数据来源张鑫旭的网络日志 先说下我们的图片链接格式 所有的链接都是这样的格式,我们需要改...

小心夹手 ⋅ 05/11 ⋅ 0

JavaScript 编程精解 中文第三版 十四、文档对象模型

十四、文档对象模型 原文:The Document Object Model 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 Too bad! Same old story! Onc...

ApacheCN_飞龙 ⋅ 05/11 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

前端基础之JavaScript

一、JavaScript的历史 略 二、ECMAScript 注:ES6就是指ECMAScript 6。 尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一...

西鼠 ⋅ 05/09 ⋅ 0

WarriorJS 0.4.0 发布,学习编程和 AI 的教学游戏

WarriorJS 是一个采用 JavaScript 开发的教学类游戏,用于学习 JavaScript 编程和人工智能。简单地说,WarriorJS 是一个需要靠编写 JS 来玩的小游戏,启动后你需要不断攀爬 JS 世界,最终爬上...

王练 ⋅ 05/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

UI ,前端框架选型

Flat-UI

miaojiangmin ⋅ 5分钟前 ⋅ 0

Istio Service Mesh 教程

Istio Service Mesh 教程 作者 宋净超 | 5400字 | 阅读大约需要11分钟 | 归档于istio | 发表于 2018-05-22 标签 #Istio #教程,来自 https://servicemesher.github.io/blog/istio-service-m...

openthings ⋅ 10分钟前 ⋅ 0

scala swing

scala swing组件的库 https://github.com/scala/scala-swing scala swing的API文档 https://www.scala-lang.org/api/2.9.1/scala/swing/package.html...

whoisliang ⋅ 14分钟前 ⋅ 0

CentOS安装配置Nginx

安装依赖 yum install gcc yum install pcre-devel yum install zlib zlib-devel yum install openssl openssl-devel //一键安装上面四个依赖 yum -y install gcc zlib zlib-devel pcre-deve......

临江仙卜算子 ⋅ 20分钟前 ⋅ 0

开源 java CMS - FreeCMS2.8 依申请公开

项目地址:http://www.freeteam.cn/ 依申请公开 1. 转交申请公开 用户可以把申请公开转交给其他人办理,系统会记录此申请公开的转交记录。 注意:同时只能转交一个申请公开。 选择需要转交的...

freeteam ⋅ 25分钟前 ⋅ 0

以太坊 web3.py 签名转账

以太坊 web3.py 签名转账 本文节选自电子书《Netkiller Blockchain 手札》 Netkiller Blockchain 手札 Mr. Neo Chan, 陈景峯(BG7NYT) 中国广东省深圳市龙华新区民治街道溪山美地 518131 +86...

netkiller- ⋅ 30分钟前 ⋅ 0

年薪40W的程序员必会的技术有哪些?

很多人在问我,程序员如何拿高薪,如何做到年薪40W+,其实总结出来还是一句话,你的技术决定你的能力已经薪资。 那么什么样的技术人才才能拿到一份Java行业里面的高薪呢? 下面是我的一个总结...

码代码的小司机 ⋅ 31分钟前 ⋅ 0

jesque-spring使用及源码分析

1.使用 jesque结合spring使用,步骤如下: 1.1 在项目中添加maven依赖 <dependency> <groupId>net.lariverosc</groupId> <artifactId>jesque-spring</artifactId> <version>1.0.0</ve......

Funcy1122 ⋅ 32分钟前 ⋅ 0

OSChina 周二乱弹 —— 加班的代码不要枉费了我的童子功

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《29》- 未完成乐队 《29》- 未完成乐队 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :#看球提醒# 02:00 巴西v...

小小编辑 ⋅ 58分钟前 ⋅ 16

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部