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代码块的末尾包含了一个奇怪的字符​​​​，这是一个不可见字符，可能会导致代码执行错误。如果在复制和粘贴代码时遇到问题，请确保删除该字符。