首页 > 编程语言 >客户端javascript对象的几何属性(获得大小及坐标)

客户端javascript对象的几何属性(获得大小及坐标)

时间:2023-05-12 11:32:50浏览次数:46  
标签:style javascript Element window 宽度 坐标 document 客户端


在一些客户端 javascript 对象中,存在着如宽度、高度、坐标类的几何属性,同时这些属性在不同的浏览器下又有不同的属性名。现在将所有的此类对象的几何属性汇总,便于学习,免得搞混。

1. 浏览器窗口在桌面的坐标( x,y

Window

       IE 下: window.screenLeft, window.screenTop(经测试,发现在 IE 浏览器下,该坐标为文档在屏幕上面的坐标,并非浏览器窗口在屏幕上面的坐标)

Firefox 下: window.screenX, window.screenY


2.
浏览器的可视化窗口大小

所有浏览器除了 IE : window.innerWidth, window.innerHeight

       IE6 with DOCTYPEL : document.documentElement.clientWidth, document.documentElement.clientHeight

       IE6 without DOCTYPE : document.body.clientWidth, document.body.clientHeight


3.
浏览器整个窗口的大小

Window

       IE 不支持: window.outerWidth, window.outerHeight


4.
文档滚动条滚过的宽度和高度

所有浏览器除了 IE : window. pageXOffset, window. pageYOffset

       IE6 with DOCTYPEL : document.documentElement.scrollLeft, document.documentElement. scrollTOP

       IE6 without DOCTYPE : document.body. scrollLeft, document.body. scrollTop


5.
元素的坐标和大小

坐标: Element.offsetLeft, Element.offsetTop (此值为相对坐标,相对于 body 或者其他相对定位的父元素;关于元素绝对位置的计算,还需要考虑父元素 offsetParent

       大小: Element.offestWith, Element.offsetHeight; clientWidth, clientHeight ; ScrollWidth, ScrollHeight

scrollWidth :对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)

clientWidth :对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

       offsetWidth :对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。


6.
鼠标的坐标

Event

       Event.clientX, Event.clientY (同时要注意 IE 和 Firefox


7.
屏幕宽度、高度和屏幕的可用宽度、高度

Screen

       屏幕宽度、高度; screen.width, screen.height

       屏幕的可用宽度、高度: screen.availWidth, screen.availHeight


8.
元素的 css 属性宽度、高度、外边距、内边距、坐标

Element

       Element.style.width, Element.style.height

       Element.style.marginLeft, Element.style.marginTop

Element.style.paddingLeft, Element.style.;paddingTop

Element.style.left, Element.style.top




标签:style,javascript,Element,window,宽度,坐标,document,客户端
From: https://blog.51cto.com/u_8895844/6270059

相关文章

  • PostgreSQL 10 文档: PostgreSQL 客户端工具
    PostgreSQL客户端应用这部份包含PostgreSQL客户端应用和工具的参考信息。不是所有这些命令都是通用工具,某些需要特殊权限。这些应用的共同特征是它们可以被运行在任何主机上,而不管数据库服务器在哪里。当在命令行上指定用户和数据库名时,它们的大小写会被保留—空格或特殊字......
  • Javascript基础(三)
    ⭐WebAPIsWebAPIs和JS基础关联性JS的组成API和WebAPIAPI(ApplicationProgrammingInterface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。WebAPI是......
  • Javascript基础(一)
    ⭐初识JavascriptJavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行「Javascript的作用」表单动态校验(密码强度检测)(JS产生最初的目的)网页特效服务端开发......
  • Javascript基础(二)
    ⭐数组数组的概念数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。创建数组1.利用new创建数组var数组名=newArray();vararr=newArray();//创建一个新的空数组2.利用......
  • 一文让你搞懂javascript如何实现继承
    一、本文想给你聊的东西包含一下几个方面:(仅限于es6之前的语法哈,因为es6里面class这关键字用上了。。)1.原型是啥?原型链是啥?2.继承的通用概念。3.Javascript实现继承的方式有哪些? 二、原型是啥?原型链是啥?1.原型是函数本身的prototype属性。首先js和java不一样,js顶多算是一个......
  • 客户端容器 | 青训营笔记
    浏览器架构浏览器架构演进单进程架构:所有模块运行在同一个进程里,包含网络、插件、JavaScript运行环境等多进程架构(现代浏览器的常用架构):主进程、网络进程、渲染进程、GPU进程、插件进程面向服务架构:算是多进程架构的升级版。将原来的UI、数据库、文件、设备、网络等,作为一......
  • javascript:void(0)
    javascript:void(0),仅仅表示一个死链接,当href=javascript:void(0)的空链接被点击时,页面不会有任何反应。让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数。javascript:是伪协议,表示url的内容通过javascript执行。void(0)计算结果......
  • JavaScript 中的 `for...in` 和 `for...of`
    JavaScript中的for...in和for...of是两种常用的迭代循环语句。它们的用途和行为是不同的。for...in循环用于循环遍历对象的属性,它会遍历对象的可枚举属性和原型链上的可枚举属性。constobj={a:1,b:2};for(letpropinobj){console.log(prop);//输出'a'......
  • spark-sql 启动客户端报错问题
    1.spark-sql启动报错java.lang.NoClassDefFoundError:org/apache/tez/dag/api/SessionNotRunning原因:在启动时找不到tez的jar包解决方法:将tez目录下的tez-api-0.9.1.jar复制一份到spark的jars目录下cptez-api-0.9.1.jar/usr/hdp/current/spark2-client/jars/分发到其他......
  • java代码中fastjson生成字符串和解析字符串的方法和javascript文件中字符串和json数组
    1.java代码中fastjson生成字符串和解析字符串的方法List<TemplateFull>templateFulls=newArrayList<TemplateFull>();JSONArrayjsonArr=newJSONArray();jsonArr.addAll(templateFulls);StringjsonStr=jsonArr.toJSONString();System.out.pr......