博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
获取网页内容区域各种高/宽汇总
阅读量:6816 次
发布时间:2019-06-26

本文共 2246 字,大约阅读时间需要 7 分钟。

js获取屏幕高度和宽度

 window.onload = function(){

        
// 获取屏幕高度 document.documentElement.clientHeight
        
console.log(document.documentElement.clientHeight);
        
// 获取屏幕宽度 document.documentElement.clientWidth
        
console.log(document.documentElement.clientWidth);
    
}
jq获取屏幕高度和宽度
$(window).innerHeight();
$(window).innerWidth();

alert($(window).height());                           //浏览器当前窗口可视区域高度

alert($(document).height());                        //浏览器当前窗口文档的高度

alert($(document.body).height());                //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width());                            //浏览器当前窗口可视区域宽度

alert($(document).width());                        //浏览器当前窗口文档对象宽度

alert($(document.body).width());                //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

 
 
 
js,获取某元素距离屏幕顶端的间距:

document.οnscrοll=function(){

  var a=document.getElementsByClassName('box')[0].offsetTop;
  var sTop = document.body.scrollTop;
  var result = a - sTop;
  console.log(result)
}

jq,获取某元素距离屏幕顶端的间距:

$(window).scroll(function(){

  var a=$(".box").offset().top;
  var b=$(window).scrollTop();
  var c=a-b;
  console.log(c);
  if(c==100){
    alert(111)
  }
 })

 

 

function a(){
"屏幕宽高为:"+screen.width+"*"+screen.height; } 其它: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 的高:window.screen.height 的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth HTML精确定位: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 相对文档的水平座标+垂直方向滚动的量

转载于:https://www.cnblogs.com/zlq92/p/6186942.html

你可能感兴趣的文章
poj3087
查看>>
mybatis generator
查看>>
[Selenium] close alert window
查看>>
远程调用appium server
查看>>
The-ith-Element
查看>>
找规律 Codeforces Round #290 (Div. 2) A. Fox And Snake
查看>>
枚举 POJ 1753 Flip Game
查看>>
洛谷3396:哈希冲突——题解
查看>>
Mysql之数据库设计
查看>>
Java Enum
查看>>
method="post" 用户名和密码不显示在网址里
查看>>
LeetCode----8. String to Integer (atoi)(Java)
查看>>
JSP标签
查看>>
Python--day65--母版和继承的基本使用
查看>>
在python 3.6的eclipse中,导入from lxml import etree老是提示,Unresolved import:etree的错误...
查看>>
经纬度计算距离
查看>>
Linux 在添加一个新账号后却没有权限怎么办
查看>>
React 源码剖析系列 - 不可思议的 react diff
查看>>
走近抽象类与抽象方法
查看>>
4. 寻找两个有序数组的中位数
查看>>