js获取屏幕的宽和高

<script type="text/javascript">window.onload = function() {// 获取元素  let div1 = document.getElementById('div1');console.log(window);// 获取计算后的样式  let Style = window.getComputedStyle(div1);console.log(Style);// 获取元素的矩形对象  let rect = div1.getBoundingClientRect(); let w = Style.width; // "500px"  let h = Style.height; // "300px" console.log(w);console.log(h);let innerw =div1.clientWidth; // "540px"let innerh =div1.clientHeight;// "340px"console.log(innerw);console.log(innerh);// 获取外部宽度(包括边框和内边距)  let outerw = rect.width;  // 获取外部高度(包括边框和内边距)  let outerh = rect.height;console.log(outerw);console.log(outerh);alert("width()="+w+":height()="+h);alert("innerWidth()="+innerw+":innerHeight()="+innerh);alert("outerWidth()="+outerw+":outerHeight()="+outerh);};</script>

 

提供的代码片段是一个JavaScript代码,用于获取具有id "div1"的HTML元素的各种尺寸测量。

以下是代码的执行过程:

1. 使用window.onload事件确保代码在页面加载完成后执行。

2. 使用getElementById()方法获取对具有id "div1"的HTML元素的引用。

3. 使用getComputedStyle()方法获取“div1”元素的计算样式,其中包括宽度和高度。

4. 使用getBoundingClientRect()方法获取“div1”元素相对于视口的尺寸和位置。

5. 将计算样式的宽度和高度属性以及“div1”元素的clientWidth和clientHeight属性记录到控制台。

6. 也将getBoundingClientRect()结果的宽度和高度属性记录到控制台。

7. 最后,显示三个提示消息,每个消息显示“div1”元素的不同尺寸测量。

总体而言,该代码提供了一种使用JavaScript确定HTML元素的大小和尺寸的方法。

		<div id="div1"></div>​
#div1 {width: 500px;height: 300px;border: 5px solid orange;padding: 20px;margin: 30px;}​

 

 

提供的代码是一个HTML代码块,其中包含一个具有id "div1"的div元素,并且还包含了一些CSS样式。

在CSS样式中,div元素被定义为具有以下属性:

- 宽度为500像素
- 高度为300像素
- 边框为5像素的橙色边框
- 内边距为20像素
- 外边距为30像素

这些样式规则将应用于具有id "div1"的div元素,从而使其显示为一个500像素宽、300像素高的元素,并且有20像素的内边距和5像素的边框。

请注意,在提供的HTML代码块的末尾包含了一个奇怪的字符​​​​,这是一个不可见字符,可能会导致代码执行错误。如果在复制和粘贴代码时遇到问题,请确保删除该字符。

 

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

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

相关文章

SQL注入之order by脚本盲注

一、环境 还是用上次搭建的sql-labs靶机环境 搭建sql注入环境 二、什么是order by盲注 在有的时候我们进行sql注入时&#xff0c;源码的查询语句后面为order by&#xff1b; 众所周知&#xff0c;order by 后面接的字段或者数字不一样&#xff0c;那么这个数据表的排序就会…

【python】学习笔记03-循环语句

3.1 whlie循环的基础语法 - while循环的语法格式 - while循环的注意事项 条件需提供布尔类型结果&#xff0c;True继续&#xff0c;False停止 空格缩进不能忘 请规划好循环终止条件&#xff0c;否则将无限循环 """ 演示while循环基础练习题&#xff1a;求1-10…

计算机组成原理 — 存储器(2)

高速缓冲存储器 大家好呀&#xff01;我是小笙&#xff0c;由于存储器这部分章节内容较多&#xff0c;我分成二部分进行总结&#xff0c;以下是第二部分&#xff0c;希望内容对你有所帮助&#xff01; 概述 目的&#xff1a;避免CPU空等现象 原理&#xff1a;程序访问的局部…

基于Springboot的旅游网管理系统设计与实现(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的旅游网管理系统设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…

【java】13:饿汉式和懒汉式

单例(单个的实例) 1&#xff0e;所谓类的单例设计模式&#xff0c;就是采取一定的方法保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法2单例模式有两种方式:1)饿汉式2)懒汉式 单例模式应用实例&#xff…

力扣爆刷第80天--动态规划一网打尽子序列一维二维连续不连续变体

力扣爆刷第80天–动态规划一网打尽子序列一维二维连续不连续变体 文章目录 力扣爆刷第80天--动态规划一网打尽子序列一维二维连续不连续变体零、总结一、1035.不相交的线二、53. 最大子序和三、392.判断子序列四、115.不同的子序列 零、总结 今天也是子序列的一天&#xff0c;…

NLP 使用Word2vec实现文本分类

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客 &#x1f366; 参考文章&#xff1a;365天深度学习训练营 &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制]\n&#x1f680; 文章来源&#xff1a;[K同学的学习圈子](https://www.yuque.com/…

【算法小讲堂】#1 贪心算法

引入——关于贪心算法 我们先来做一个小游戏——现在假设自己是一个小偷&#xff0c;桌上有一些物品&#xff0c;包括一台iPhone15、一个充电宝、一个眼罩和一个溜溜梅。此时&#xff0c;你听说警察即将到来&#xff0c;那么你会先带走哪个东西呢&#xff1f; 一般来讲&#xf…

「Python系列」Python JSON数据解析

文章目录 一、JSON数据解析1. 读取和解析JSON文件2. 字符串到Python对象的解析3. Python对象到JSON字符串的转换4. 错误处理5. JSON数据的格式化输出 二、Python 编码为 JSON 类型转换对应表三、JSON简介四、相关链接 一、JSON数据解析 在Python中解析JSON数据通常使用json模块…

VUE中引入外部jquery.min.js文件

jquery官网&#xff1a;https://jquery.com/ cdn链接&#xff1a;https://code.jquery.com/jquery-3.7.1.js <template><div class"">测试jq<div id"jq">这是一个盒子</div></div> </template><script> import…

再次委托|工科背景老师赴美国斯坦福大学自费访学

工科背景的I老师&#xff0c;几年前曾通过我们获得美国哈佛大学医学院的无薪博士后职位&#xff0c;从事医工交叉学科研究。回国完成2年服务期后&#xff0c;I老师再次委托并仍希望去美国顶尖高校&#xff0c;最终我们落实了世界名校斯坦福大学的访问学者职位&#xff0c;满足了…

网络安全的重要性及SASE在企业中的应用

在信息技术日益发展的今天&#xff0c;网络安全已经成为企业不可忽视的重要议题。然而&#xff0c;仍有部分企业对网络安全的重视程度不够&#xff0c;这种疏忽可能会给企业带来严重的后果。 1. 数据泄露的风险 数据是现代企业的核心资产之一。如果企业不重视网络安全&#x…

跨境外贸自动评论脚本开发常用代码!

随着跨境电商的兴起&#xff0c;自动化评论成为了提升销售和客户满意度的重要工具&#xff0c;通过编写自动评论脚本&#xff0c;商家可以快速地在各个平台留下正面评价&#xff0c;提高产品的曝光率和信誉度。 本文将介绍跨境外贸自动评论脚本开发的一些常用代码&#xff0c;…

RabbitMq:RabbitMq 主从镜像模式②

一、模式思想 所有的技术设计思想&#xff0c;基本都在两点上下功夫&#xff1a;1. 生产力上 2. 稳定性上 二、集群模式 今天又有人问起来rabbitmq的高可用方式&#xff0c;因为和常见的主从模式有点区别&#xff0c;所以就记录一下。 rabbitmq集群的镜像队列提供了更高级的主…

【前沿热点视觉算法】-视觉识别的统一卷积和自我注意

计算机视觉算法分享。问题或建议&#xff0c;请文章私信或者文章末尾扫码加微信留言。 1 论文题目 视觉识别的统一卷积和自我注意 2 论文摘要 由于大量的局部冗余和复杂的全局依赖性&#xff0c;从图像和视频中学习区别表示是一项具有挑战性的任务。卷积神经网络&#xff08…

算法沉淀——动态规划之路径问题(leetcode真题剖析)

算法沉淀——动态规划之路径问题 01.不同路径02.不同路径 II03.珠宝的最高价值04.下降路径最小和05.最小路径和06.地下城游戏 01.不同路径 题目链接&#xff1a;https://leetcode.cn/problems/unique-paths/ 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图…

SpringMVC 学习(七)之报文信息转换器 HttpMessageConverter

目录 1 HttpMessageConverter 介绍 2 RequestBody 注解 3 ResponseBody 注解 4 RequestEntity 5 ResponseEntity 6 RestController 注解 1 HttpMessageConverter 介绍 HttpMessageConverter 报文信息转换器&#xff0c;将请求报文&#xff08;如JSON、XML、HTML等&#x…

【HarmonyOS】鸿蒙开发之Stage模型-应用配置文件——第4.2章

Stage模型-应用配置文件 AppScope -> app.json5&#xff1a;应用的全局配置信息entry&#xff1a;OpenHarmony工程模块&#xff0c;编译构建生成一个HAP包 build&#xff1a;用于存放OpenHarmony编译生成的hap包src -> main -> ets&#xff1a;用于存放ArkTS源码src …

每日一题——LeetCode1512.好数对的数目

方法一 暴力循环 var numIdenticalPairs function(nums) {let ans 0;for (let i 0; i < nums.length; i) {for (let j i 1; j < nums.length; j) {if (nums[i] nums[j]) {ans;}}}return ans; }; 消耗时间和内存情况&#xff1a; 方法二&#xff1a;组合计数 var …

msvcr110.dll找不到怎么修复?多种解决msvcr110.dll缺失方法分析

面对如“程序无法启动&#xff0c;因为电脑中缺失msvcr110.dll”这样的错误提示时&#xff0c;你的日常工作或游戏娱乐很可能会被迫暂停。这种问题在Windows用户中相当普遍&#xff0c;它们来源于某些共享的系统文件缺失。不过&#xff0c;好消息是解决此类错误通常并非困难任务…