首页 > 其他分享 >js和jquery获取屏幕宽高以及加margin和padding等边距的宽高

js和jquery获取屏幕宽高以及加margin和padding等边距的宽高

时间:2023-04-04 18:12:14浏览次数:49  
标签:jquery body height 宽高 js padding width div document

Javascript:

网页可见区域宽: 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

 JQuery

 

$(document).ready(function(){
$(window).height(); //浏览器当前窗口可视区域高度
$(document).height(); //浏览器当前窗口文档的高度
$(document.body).height();//浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin

$(window).width(); //浏览器当前窗口可视区域宽度
$(document).width();//浏览器当前窗口文档对象宽度
$(document.body).width();//浏览器当前窗口文档body的宽度
$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin

})

  div的宽高:

$(function(){
        $("div").width();//div的width
        $("div").innerWidth();//div的padding+width
        $("div").outerWidth();//div的padding+width+border
        $("div").outerWidth(true);//div的padding+width+border+margin
        
        $("div").height(); //div的height   
        $("div").innerHeight();//div的padding+height
        $("div").outerHeight();//div的padding+height+border
        $("div").outerHeight(true);//div的padding+height+border+margin
})

  

标签:jquery,body,height,宽高,js,padding,width,div,document
From: https://www.cnblogs.com/j-a-h/p/17287291.html

相关文章

  • swift tabview 带参数请求网络。多条目展示。json解析,逃逸闭包
    效果:用到的第三方#Uncommentthenextlinetodefineaglobalplatformforyourprojectplatform:ios,'9.0'target'News'do#Commentthenextlineifyoudon'twanttousedynamicframeworksuse_frameworks!#PodsforNewsp......
  • jQuery中this与$(this)的使用与区别
    https://blog.csdn.net/h2604396739/article/details/95191644this与$(this)的区别this其实是一个Html元素,是一个javascript对象,常用其来为其属性赋值。$(this)是一个jQuery对象,不存在html的属性,只能通过方法传参的方式为属性赋值。如下代码$(“#textbox”).hover(function(......
  • jQuery height() 方法
    https://blog.csdn.net/m0_57835615/article/details/117827323jQueryheight()方法可用于设置或返回被选元素的高度。返回元素的高度时,只返回匹配到的第一个元素的高度。设置元素的高度时,所有匹配到的元素的高度都会被设置。值得一提的是,该方法不包含元素的内外边距以及边框......
  • Stemciljs学习2、组件生命周期
    组件有许多生命周期方法,可用于了解组件何时“将”和“执行”加载、更新和呈现。可以将这些方法添加到组件中,以便在正确的时间挂接到操作中。在组件类中实现以下方法之一,Stencil将以正确的顺序自动调用它们:单组件的生命周期import{Component,Host,h,Prop,Watch}from'@sten......
  • js中e.clientX e.pageX e.offsetX e.screenX之间的区别
     event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但......
  • Win7安装node.js
    问题win7直接安装node.js官网的最新版安装不成功,是因为最新版的版本高,不支持win7,只支持win8以上。解决安装低版本的node.js,我选的是12.22.12版本,然后为其配置环境变量即可。如果需要npm,你只需要下载一个版本,解压后将除node之外的所有文件放到你安装好的目录下即可。运行在cm......
  • NestJS 拦截器 和 RxJs
    为什么要介绍RxJs因为在Nestjs已经内置了RxJs无需安装并且Nestjs也会有一些基于Rxjs提供的APIRxJs是什么RxJs使用的是观察者模式,用来编写异步队列和事件处理。Observable可观察的物件Subscription监听ObservableOperators纯函数可以处理管道的数据如mapfil......
  • js实现拖拽功能(拖拽排序)
    <template><transition-groupclass="container"name="sort"><divclass="drag-item"v-for="(v,i)indragArray":key="i":draggable="true"@dragstart="dr......
  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......
  • js实现文字左右轮播
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.textDiv{position:relative;......