原生JS獲取元素集合的子元素寬度實例

2019-11-19 18:29:01

字體：大中小

來源：轉載

供稿：網友

有些時候，在一個網頁的ul li中，存在左右兩個部分的內容，但是右邊元素內容又是不固定，左邊元素相對應的不能用固定寬度，所有需要我們動態的獲取右邊元素寬度，來賦值給左邊元素的marginRight值。

HTML結構：

<ul class="itemCon">  <li class="item">    <div class="leftMess">      <div class="leftCon">        <span>頭像</span>        <p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p>      </div>    </div>    <div class="rightMess">      <span>工具1</span>      <span>工具2</span>      <span>工具3</span>    </div>  </li>  <li class="item">    <div class="leftMess">      <div class="leftCon">        <span>頭像</span>        <p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p>      </div>    </div>    <div class="rightMess">      <span>工具2</span>      <span>工具3</span>    </div>  </li>  <li class="item" id="test">    <div class="leftMess">      <div class="leftCon">        <span>頭像</span>        <p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p>      </div>    </div>    <div class="rightMess">      <span>工具3</span>    </div>  </li></ul>

配上CSS：

html,body{padding:0;margin:0}ul,li{list-style:none;padding:0;margin:0}p{margin:0;padding:0}.itemCon{width:450px;height:auto; margin:100px auto; background:#ccc; overflow:hidden}.item{width:100%; float:left;height:60px;border-bottom:solid 1px #f00; position:relative}.leftMess{ height:60px;}.leftCon{ float:left; height:60px; overflow:hidden;width:100%}.leftMess span{ display:inline-block;width:50px;height:50px; border-radius:50%; background:#f00; text-align:center; line-height:50px; margin:5px; float:left}.leftMess p{ margin-left:60px}.rightMess{width:auto;height:60px; position:absolute;right:0;top:0}.rightMess span{width:50px; height:50px; line-height:50px; text-align:center; margin:5px; float:left; background:#f00}

最后JS代碼：

<script type="text/javascript">  var divs = document.getElementsByClassName('item');  for (var i = 0; i < divs.length; i++) {    var lastW = divs[i].children[1].offsetWidth;    divs[i].children[0].style.marginRight=lastW+"px"  }</script>

最終效果圖：