原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度
JQ:相对比较简便
获取浏览器显示区域(可视区域)的高度 :
$(window).height();
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度 :
$(document).width();
浏览器当前窗口文档body的高度:
$(document.body).height();
浏览器当前窗口文档body的宽度:
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft();
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height(); 原生JS:
document.documentElement.scrollTop //firefox document.documentElement.scrollLeft //firefox document.body.scrollTop //IE document.body.scrollLeft //IE
像这种不兼容的获取方式,我们要做一下兼容,封装一个函数
function getScrollTop(){
var scroll_top = ;
if (document.documentElement && document.documentElement.scrollTop) {//如果非IE
scroll_top = document.documentElement.scrollTop;
}
else if (document.body) {//IE浏览器
scroll_top = document.body.scrollTop;
};
return scroll_top;
};
网页工作区域的高度和宽度
document.documentElement.clientHeight// IE firefox
原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度的更多相关文章
- 原生JS与JQ获取元素的区别
刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...
- JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- js模拟jq获取id
js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...
- js计算元素距离顶部的高度及元素是否在可视区判断
前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在 ...
- 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制
这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...
- Js与Jq 获取浏览器和对象值的方法
JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...
- js获取元素的滚动高度,和距离顶部的高度
jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...
- js,jq获取父,兄弟,子节点整理
js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...
随机推荐
- 在Linux系统下安装nginx教程
最近学习了nginx,就打算nginx安装在Linux系统下,于是我就把安装步骤记录下来了,分享给大家,希望能对大家有帮助! 我的博客地址:https://www.cnblogs.com/themys ...
- Linux04——手动修改IP和关闭防火墙服务
两种方法手动修改IP: 命令行方式 2. 图形化界面修改 点击应用即可(地址自行设置) 关闭防火墙服务,否则连不上Linux
- Map-HashMap 与 IF 判断内存占用对比
HashMap与IF判断内存占用对比,事实证明,Map对象在以下情况确实比IF判断占用内存低. HashMap占用内存:13000 package com.taiping.bky; import ja ...
- Spring的简单介绍
struts2:web层hibernate:dao层spring:service层 1 spring框架概述 1.1 什么是springSpring是一个开源框架,Spring是于2003 年兴起的一 ...
- 【译】高级T-SQL进阶系列 (三)【中篇】:理解公共表表达式(CTEs)
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 一个简单的CTE例子 如前所述,CTE‘s提供给你了一个方法来更容易的书写复杂的代码以提高其可读性.假设你有列表 ...
- 数码管显示“0~F”的共阳共阴数码管编码表
嵌入式设备中数码管显示“0~F”的方式是:定义了一个数组,里面含有16个元素,分别代表0~F,这样可以方便以后的调用.共阳极数码管编码表:unsigned char table[]={0xc0,0xf ...
- agc026F Lotus Leaves
题目链接 题目大意 一个n*m的网格上有一些点,一个点可以跳到与其同一行或同一列的点上.给定起点和终点. 求要使起点不能跳到终点,最少撤走几个点. \(n,m\leq 100\) 解题思路 考虑将能够 ...
- go开发工具goclipse的安装
(1) 安装Eclipse 建议下载Eclipse时直接下载"Eclipse IDE for Java Developers"的package,而不要下载较小的Installer. ...
- Spark Streaming实践和优化
发表于:<程序员>杂志2016年2月刊.链接:http://geek.csdn.net/news/detail/54500 作者:徐鑫,董西成 在流式计算领域,Spark Streamin ...
- Django框架之图书管理系统(一)
图书管理系统共分为两篇博客进行讲解,该篇博客主要记录图书与出版社之间的关系(一对一),记录图书的增删查改操作 ============================================= ...