DOM 获取元素高度非常奇怪

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3348 天前的主题，其中的信息可能已经有所发展或是发生改变。

<div id="main-contain">
    <!-- 左侧主要导航条 start -->
    <div id="vertically-main-sidebar">
        <div id="v-m-scroll-wrap">

        <div id="hidden-v-nav-text" class="vertically-top-control-button">
            <i class="fa fa-bars display-IB" id="top-list-icon"></i>
        </div>


        <div id="edit-entrance">
            <div class="vertically-head-title">
                <a href="#">
                    <i class="fa fa-caret-down ever-v-title-icon"></i>
                    <h4 class="v-h-title-name display-IB">常规管理</h4>
                </a>
            </div>
            <ul class="sub-vertically-item">
            </ul>
        </div>

 <div id="edit-entrance">
            <div class="vertically-head-title">
                <a href="#">
                    <i class="fa fa-caret-down ever-v-title-icon"></i>
                    <h4 class="v-h-title-name display-IB">常规管理</h4>
                </a>
            </div>
            <ul class="sub-vertically-item">
            </ul>
        </div>

        </div>
    </div>
    </div>

    #vertically-main-sidebar {
    position: absolute;
    width: 180px;
    overflow: hidden;
}

#v-m-scroll-wrap {
    width: 200px;
    background-color: #293038;
    overflow-x: hidden;
    overflow-y: auto;
}

获取 vertically-main-sidebar 宽度本应该是 180, 但是无论是原生 DOM 还是 jQuery, 一会儿 180, 一会儿变成 1335 宽度.

jquery

$(document).ready(function () {
  // 页面除顶部导航外剩余高度
  var mainHeight =  windowHeight - 50;
  var mainHeightText = mainHeight + 'px';

  // 左侧主 sidebar 滚动高度设置
  var mainSideBarScroll =  $('#v-m-scroll-wrap');
  mainSideBarScroll.css('height', mainHeightText);

  // 左侧主 sidebai
  var mainSideBar = $('#vertically-main-sidebar');

  //下面三个一直不一致
  console.log(windowWidth);
  console.log(mainSideBar.css('width'));
  console.log(document.getElementById('vertically-main-sidebar').offsetWidth);

});

1 条回复 • 2015-10-29 23:47:39 +08:00

Biwood

2015-10-29 23:47:39 +08:00

你需要了解 $(document).ready() 和 window.onload 的区别