学习使用javascript、jquery根据class或者id名称获取指定div或者当前浏览器等的宽度

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/121953336

本文介绍了如何使用JavaScript、jQuery获取HTML中带有'headCon'类的div元素宽度，以及多种获取页面宽度的不同方式，适合前端开发者理解和实践.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript、jquery根据class或者id名称获取指定div或者当前浏览器等的宽度

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
</head>
  <body>
    <div id="app">
        <div data-reactroot="">
        <div class="main">
           <div class="headCon">
              <div class="navbar_Header">
                  <div class="headLogo">
                  </div>
              </div>
             <div class="headMenus">
           </div>
        </div>
       <div class="conLeft">
       </div>
       <div class="conRight">
       <div class="conMap">
       </div>
       </div>
       </div>
      </div>
    </div> 
</body>
</html>

headCon是网页布局中的头文件的class 名字。上面的html文件有点乱，没做调整，是react渲染后导出的。仅用来参考说明headCon的作用。

headconWidth是指获取的宽度的变量。

下述是分别获取宽度的方法，每个方法代表的含义后续再更，暂时先放着。

    var headconWidth = window.innerWidth;
    var headconWidth = $(".headCon").width();	 
    var headconWidth = document.body.clientWidth;
    var headconWidth = document.body.offsetWidth;
    var headconWidth = $(window).width();
    var headconWidth = document.documentElement.clientWidth
    var headconWidth = document.body.scrollWidth;
    var headconHeight = $(".headCon").height();