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

这篇具有很好参考价值的文章主要介绍了js和jquery获取屏幕宽高以及加margin和padding等边距的宽高。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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
})

  文章来源地址https://www.toymoban.com/news/detail-807368.html

到了这里,关于js和jquery获取屏幕宽高以及加margin和padding等边距的宽高的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序获取屏幕宽高

    uniapp开发微信小程序的时候,有时候去调整样式 你需要适配各种手机屏幕,使用,你的样式宽高就不能使用rpx   有的朋友觉得可以使用vw  vh  %   是的,当然可以 但是要让你的元素,宽高,比如50%再去加上20rpx  怎么做 所以这时候就要去获取不同手机页面屏幕的宽高 如何

    2023年04月09日
    浏览(54)
  • React Native获取手机屏幕宽高(Dimensions)

      参考链接: https://www.reactnative.cn/docs/next/dimensions#%E6%96%B9%E6%B3%95 https://chat.xutongbao.top/

    2024年02月14日
    浏览(46)
  • 小程序获取屏幕宽高wx.getSystemInfoSync().windowWidth

    方式一:getSystemInfo:需要在success方法中取值 方式二:getSystemInfoSync:可以直接\\\".windowWidth\\\"取值 1、官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx,则1rem=750/20rpx。       即:不论哪个型号的手机,屏幕宽度都是750rpx 2、微信小程序rpx,px,rem单位换算规则       屏幕实际宽度

    2024年02月12日
    浏览(39)
  • vue3指导教程(附带获取屏幕可视区域宽高)

            vue3.0 向下兼容 vue2.x 版本,优化了主要核心双向绑定原理和体积大小,并且更加友好的兼容 ts 语法。vue3是基于ES6新增的proxy代理实现的。 1.1 vue3的特点 新增了组合式api 更接近原生js 更加解耦(收到react启发) 按需加载 1.2 与vue2的区别         相同点:生命周

    2024年02月03日
    浏览(42)
  • CSS中的margin与padding

    目录  一、margin 1.概念及作用 2.基本语法 3.margin的用法 二、padding 1.介绍 2.基本语法及要求 3. 用法 4.内边距和元素宽度 讲这些之前,先看一张图,便于理解  一、margin 1.概念及作用 CSS   margin   属性用于在任何定义的边框之外,为元素周围创建空间。 通过 CSS,您可以完全控

    2024年02月11日
    浏览(37)
  • js获取dom元素宽高的方法

    这种⽅法,有⼀定局限性,只能取 内联样式 的宽⾼。 这种⽅法,也是有⼀定局限性,不过我们三种常⽤css样式都能获取。但是 只⽀持 IE ,其它浏览器不⽀持 ⽀持所有浏览器,兼容性好 这种⽅法,⼀般⽤于计算元素的绝对位置,根据视窗左上⻆的点来算的。可以拿到四个元

    2024年02月15日
    浏览(51)
  • vue项目动态获取窗口以及元素宽高

    场景1:页面刚进来时,获取窗口的默认宽高以及某个元素(div)的默认宽高 场景2:当页面缩放时,自动获取窗口的宽高以及某个元素(div)的宽高  效果如下:  因为不喜欢看别人写那么多废话,只想直接看代码,因为我有很完善的注释

    2024年02月11日
    浏览(43)
  • android——jetpack Compose布局居中,margin,padding,文字居中

    需要注意\\\"Arrangement\\\"和\\\"Alignment\\\"的区别 直接在控件中进行居中展示 Text控件中的modifier属性中有两个padding,第一个padding就属于margin,第二个就是对应原来写法的内padding,需要margin的话需要写在最前面 在 Text 控件中有对应的宽高背景,文字需要居中,有对应的TextAlign属性使用,但是属性

    2024年02月16日
    浏览(49)
  • js前端获取video视频名称+时长+缩略图+宽高

    js前端获取video视频名称+时长+缩略图+宽高,缩略图的核心是用canvas画出来的base64图片,调用函数需要传入二进制的视频文件,注意这是一个promise函数,需要用then来接收,代码如下

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包