CSS之window的视图属性

1. innerWidth 属性和innerHeight 属性

innerWidth获取浏览器窗口宽度,注意不带浏览器的边框宽度,但是包括下拉按钮的宽度

这里写图片描述

innerHeight获取浏览器窗口高度,从浏览器底部到工具栏的距离,注意不包括工具栏的高度

这里写图片描述

innerWidth和innerHeight属性只读,没有默认值

2. outerWidth属性和outerHeight属性

outerWidth是浏览器窗口包含浏览器边框的宽度

这里写图片描述

outerHeight是浏览器窗口从浏览器上边框到下边框的高度

这里写图片描述

outerWidth和outerHeight属性只读,没有默认值

3.pageXOffset和pageYOffset

pageXOffset和pageYOffset返回整个页面水平和垂直方向的滚动距离

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置

初始页面:

这里写图片描述

滑动后页面:将上部分内容滑动消失

这里写图片描述

点击按钮查看pageYOffset:

这里写图片描述

4.screenX and screenY

浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置

screenY返回的是浏览器窗口顶部到显示器顶部的距离

screenX返回的是浏览器窗口的左边(从左边框开始)到显示器的右边的距离

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在SQL Server2005中进行错误捕捉

任何程序都可能出现错误,在SQL Server中执行Transact-SQL也不例外。如果在Transact-SQL中发生了错误,一般有两种捕捉错误的方法,一种是在客户端代码(如 c#、delphi等)中使用类似try...catch的语句进行捕捉;另外一种就是…

CSS之Screen视图属性

1.availWidth和availHeight availWidth和availHeight返回的是显示器可用宽高,注意不包括开始菜单栏这种东东的高度和宽度 2.colorDepth 表示显示器的颜色深度 3.width和height 表示显示器屏幕的宽高,和availWidth和availHeight的区别是返回的宽高包含…

微信小程序几种常用弹窗提示

第一种:弹出提示框,可以选择确定或者取消。 代码:wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) {//这里是点击了确定以后console.log(用户点击确定)} else {//这里是点击了取消以后conso…

CSS之文档视图(DocumentView)和元素视图(ElementView)方法

1.elementFromPoint() 返回给定坐标处的元素。是个在目前而言,兼容性不错的方法 将给定位置处(100,100)的元素的字体颜色设置为红色 2.getBoundingClientRect() 返回的是返回的是一个对象,包含 top, left, right, 和 bottom四个属性值,大小…

[Bash]kill指定的进程名

通过bash来kill指定的进程名&#xff0c;bash文件名为&#xff1a;/home/zcm/bin/d.sh&#xff0c;内容如下&#xff1a; #!/bin/shif [ "$1" "" ]; thenecho "Usage: sh $0 <processname>"exit 0fi#s1ps -ef|grep $1|grep -v grep|awk …

CSS之元素视图属性

1.clientLeft和clientTop 返回的是内容区域的左上角相对于整个元素左上角的位置&#xff08;包括边框&#xff09; 2.clientWidth和clientHeight 表示内容区域的高度和宽度&#xff0c;包括padding大小&#xff0c;但是不包括边框和滚动条 3.offsetLeft和offsetTop offsetLe…

Vue之Vue.set动态新增对象属性

当我们给一个比如props中&#xff0c;或者data中被观测的对象添加一个新的属性的时候&#xff0c;不能直接添加&#xff0c;必须使用Vue.set方法 Vue.set方法用来新增对象的属性。如果要增加属性的对象是响应式的&#xff0c;那该方法可以确保属性被创建后也是响应式的&#x…

Vue之过渡动画

v-enter: 定义过渡开始时元素的状态。在元素被插入时生效&#xff0c;在下一个帧(下一帧也就是v-enter-active)移除(实际就是过渡将要开始之前&#xff0c;元素的状态) v-enter-active: 定义”进入过渡”的结束状态。在元素被插入时生效&#xff0c;在 transition/animation 完…

AppleScript快速入门教程

基础语法 AppleScript 入门 一、这部分介绍注释,发出声音,弹窗 (1)简单入门 <1>多行注释 (* this is multi comment *) <2>发出响声beep 3(2)#表示使用"Daniel"(英国发音)发出声音,人员选择如下图1所示say "Hello,world" using "Daniel&…

CSS之EM属性

什么是EM&#xff1f; 在一个空白的HTML文档内&#xff0c;你没有任何关于字体大小的声明而只使用默认设置。在大多数浏览器上为html和body标签的默认字体大小为100% 使用EM为单位一定要知道父元素的设置&#xff0c;因为EM是一个相对值&#xff0c;是一个相对于父元素的值 如…

PyQt6 QTimer计时器控件

锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计52条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话版…

前台关于跨域的警告A cookie associated with a cross-site resource at .........,代理服务器

前台关于跨域的警告A cookie associated with a cross-site resource at …&#xff0c;代理服务器 A cookie associated with a cross-site resource at … 解决该警告的方法&#xff1a; 在配置文件中添加配置如下&#xff1a; "proxy": {"/api": {&quo…

CSS之REM属性

什么是REM: rem指根em。它的产生是为了帮助人们解决em所带来的计算问题&#xff0c;它是字体排版的一个单位&#xff0c;等同于根font-size。这意味着1rem等同于<html>中的font-size 实例&#xff1a; 正如您看到的&#xff0c;无论您在哪里设置它&#xff0c;1rem的取…