js怎样获取div元素的宽度

Bertha 。 2023-06-07 05:53 22阅读 0赞

## 有些时候需要获取到div的宽度 ##

在线编程地址 [https://www.w3school.com.cn/tiy/t.asp?f=html\_basic][https_www.w3school.com.cn_tiy_t.asp_f_html_basic]

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    	<style>
    		.box{
    			width: 200px;
    			height: 200px;
    			padding: 5px;
    			border: 3px solid red;
    		}
    		.box2{
    			width: 220px;
    			background: red;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		
    	</div>
    	<div class="box1 box2" style="width: 200px; height:200px;padding:5px;"></div>
    </body>
    </html>
    <script type="text/javascript">
    	var dom = document.querySelector('.box');
    	var dom1 = document.querySelector('.box1');
    	// 包括padding border
    	console.log(dom.offsetWidth);
    	// 不包括padding border 仅仅是width 这个ie也许有兼容性问题
    	console.log(getComputedStyle(dom).width);
    	// 获取到通过style设置的宽度, 如果是只有类，没有style,那么就获取为空
    	console.log(dom1.style.width);
    </script>

[https_www.w3school.com.cn_tiy_t.asp_f_html_basic]: https://www.w3school.com.cn/tiy/t.asp?f=html_basic

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关 js怎样获取元素有哪些类 class 原生js获取元素的类名

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <...

布满荆棘的人生/ 2024年04月19日 11:59/ 0 赞/ 182 阅读

相关 JS--获取元素的高度与宽度

原文网址：[JS--获取元素的高度与宽度\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN] 简介说明本文介绍如何使用JavaScript获取HT

港控/mmm°/ 2024年03月30日 12:24/ 0 赞/ 196 阅读

相关 js怎样获取元素滚动的距离

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <me

ゝ一世哀愁。/ 2023年06月11日 03:30/ 0 赞/ 83 阅读

相关 js怎样获取div元素的宽度

有些时候需要获取到div的宽度在线编程地址 [https://www.w3school.com.cn/tiy/t.asp?f=html\_basic][https_ww

Bertha 。/ 2023年06月07日 05:53/ 0 赞/ 22 阅读

相关 js怎样获取元素节点怎样获取某个元素下的第一个节点获取相邻的兄弟节点

有时候不需要使用jquery，而如果需要用原生js获取节点就比较麻烦了以下是一些比较常用的api，记录一下。不一定兼容ie <!DOCTYPE h

╰半夏微凉°/ 2023年06月06日 12:11/ 0 赞/ 110 阅读

相关 js获取div的坐标

html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如何方法可以实现. Js代码 ![收藏代码][icon_star.png] 1. /\\\ 2

柔光的暖阳◎/ 2022年08月14日 00:51/ 0 赞/ 392 阅读

相关 js获取浏览器高度宽度

/\\ \计算客户端高度 \\/ function getWinHeight() \{ if (window.innerHeight) \{ r

系统管理员/ 2022年04月18日 03:38/ 0 赞/ 445 阅读

相关 js获取浏览器宽度

js获取窗口宽度 function getWidth() { var winWidth; if(window.innerWidth) {

男娘i/ 2022年03月20日 09:14/ 0 赞/ 476 阅读

相关 vue怎样操作元素怎样获取元素节点

vue中建议我们操作节点的时候使用ref来获取节点，所以虽然可以用document.getElement之类的语句来操作，不过代码还是有点长，所以我们可以使用vue提供的ap

淩亂°似流年/ 2021年12月09日 18:13/ 0 赞/ 724 阅读

相关 js获取div中子元素的个数

一、获取div下的子元素的个数 $("div").children().length; 比如<div class="abc" style="height:

爱被打了一巴掌/ 2021年10月13日 03:49/ 0 赞/ 1052 阅读