js和JQuery中的获取宽、高、位置等方法整理
1、获取当前窗口宽度区别(需要注意的是用的window还是document)
JQuery:console.log($(window).width()); //获取窗口可视区域的宽度
console.log($(document).width()); //获取文档的宽度
console.log($(window).innerWidth()); //获取浏览器的内宽(包含补白,但不包含边框)
console.log($(window).outerWidth()); //获取浏览器的外宽(包含边框)
JS: console.log(document.documentElement.clientWidth); //获取窗口可视区域的宽度
console.log($(document).width()); //获取当前窗口下的文档的宽度,当视口宽小于文档宽时,该值等于文档的宽度,当视口宽大于文档宽时,该值等于视口的宽度(常规流盒子)
console.log(window.innerWidth); //获取浏览器的内宽(不包含浏览器的边框)(IE不支持)
console.log(window.outerWidth); //获取浏览器的外宽(包含浏览器的边框)
2.获取当前窗口高度区别
JQuery:console.log($(window).height()); //获取窗口可视区域的宽度
console.log($(document).height()); //获取文档的宽度
console.log($(window).innerHeight()); //获取浏览器的内宽(包含补白,但不包含边框)
console.log($(window).outerHeight()); //获取浏览器的外宽(包含边框)
JS: console.log(document.documentElement.clientHeight); //获取窗口可视区域的宽度
console.log($(document).height()); //获取当前窗口下的文档的宽度,当视口宽小于文档宽时,该值等于文档的宽度,当视口宽大于文档宽时,该值等于视口的宽度(常规流盒子)
console.log(window.innerHeight); //获取浏览器的内宽(不包含浏览器的边框)(IE不支持)
console.log(window.outerHeight); //获取浏览器的外宽(包含浏览器的边框)
3.获取窗口的位置
JS: console.log(window.screenLeft); console.log(window.screenX); //两个都是获取浏览器距离屏幕的left值
console.log(window.screenTop); console.log(window.screenY); //两个都是获取浏览器距离屏幕的top值
4.获取元素位置
js: console.log(div.offsetLeft); //获取元素在页面中的left值(数值,只读、不可修改)
console.log(div.style.left); //获取元素在页面中的left值(字符串(如“10px”),可修改)
console.log(div.offsetTop); // 获取元素在页面中的top值(数值,只读,不可修改)
console.log(div.style.top); //获取元素在页面中的top值(字符串,可修改)
JQuery: console.log($("div").offset().left); //获取元素在页面中的left值,只读
console.log($("div").css("left")); //获取元素在页面中的left值(字符串,可修改)
console.log($("div").offset().top); //获取元素在页面中的top值,只读
console.log($("div").css("top")); //获取元素在页面中的top值(字符串,可修改)
console.log($("div").position().left); //获取子元素相对父元素的left值
console.log($("div").position().top); //获取子元素相对父元素的top值
5.获取元素大小
js:console.log(div.offsetWidth); //获取元素宽
console.log(div.offsetHeight); //获取元素高
JQuery: console.log($("div".width()); //获取元素宽
console.log($("div".height()); //获取元素高 6.获取滚动条位置
js: console.log(window.pageXoffset); console.log(window.scrollX); //两者都是获取滚动条横向移动的位置
console.log(window.pageYoffset); console.log(window.scrollY); //两者都是获取滚动条纵向移动的位置
JQuery: console.log($(window).scrollTop()); //获取纵向滚动条移动位置
console.log($(window).scrollLeft()); //获取横向滚动条移动位置
js和JQuery中的获取宽、高、位置等方法整理的更多相关文章
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- js 和 jquery 里面几个获取宽高的调查
罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth() // offsetWidth obj.clientWidth = obj ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- js和jquery中有关透明度操作的问题
在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器 ...
- 如何在js或者jquery中操作EL表达式的一个List集合
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...
- 17.在自适应屏幕里通过JQ来获取宽高并赋给需要的
在自适应屏幕里通过JQ来获取宽高并赋给需要的div. var height = document.documentElement.clientHeight; $(window).height();(同 ...
- JS与jQuery中html-与-text方法的区别
所有的实例均用下面的html <div id="id0"> <div id="id1"> 直接text <p> <sp ...
随机推荐
- 跳转到另一个APP
看看这个代码: http://code4app.com/codesample/4fcc512d6803fae60b000002 inApp跳转,不过需要Nimbus类库. 要跳转到另一个APP,需要另 ...
- Hexo - CNAME文件在每次部署后就没了
问题 一般我们会将Hexo博客搭建到Github上,如果在Github上为其配置一个自定义的域名时,会自动在项目仓库根目录下新添加一个CNAME文件.但是这里有个问题,如果将Hexo博客重新部署一遍后 ...
- VLAN-3-VLAN Trunk:ISL和802.1Q
(1)ISL和802.1Q概念 通过使用VLAN Trunk链路,设备可以通过一条链路发送去往多个vlan的流量.为了知道数据帧属于哪个vlan,发送方会添加原始以太网数据帧的头部,这 ...
- [題解](最短路)luogu_P2384最短路
hack: 4 4 1 2 10000 2 3 10000 3 4 10000 1 4 10000 答案:13 不能邊最短路邊取模,因為取模后最大值不一定為原來最大值,所以利用log(m*n)=log ...
- pip 的简单安装与基本使用
pip 是 Python 著名的包管理工具,在 Python 开发中必不可少.本文只介绍各平台最新可用并且最简单的 pip 安装方式,以方便初学者和不会敲代码只需通过 pip 安装特定工具的小伙伴们. ...
- 关于Chrome和Opera中draw Image()方法无法在canvas画布中绘制图片的问题
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=d ...
- webpack 精华文章
最近迁移 webpack1 到 webpack3 碰到了一些问题,还是通过一些文章,解决了问题.在这里做一个备份,方便以后使用. 从零搭建vue2+vue-router2+webpack3工程 Web ...
- 惊人的CSS和JavaScript动画logos例子
https://codepen.io/lindell/pen/mEVgJP Stack Overflow logo是我最喜欢的logo之一,因为它非常简单,但易于识别.并且这个片段动画点击预览Stac ...
- CF1061B Views Matter
思路: 贪心. 实现: #include <bits/stdc++.h> using namespace std; ]; int main() { int n, m; while (cin ...
- 如何加快HTML页面加载速度
1. 页面减肥 a. 页面的肥瘦是影响加载速度最重要的因素. b. 删除不必要的空格.注释. c. 将inline的script和css移到外部文件. d. 可以使用HTML Tidy来给HTML减肥 ...