快捷導(dǎo)航

原生JS獲取元素集合的子元素寬度實(shí)例

更新時(shí)間：2016年12月14日 16:08:55 作者：知乎其微

本文主要對(duì)原生JS獲取元素集合的子元素寬度的實(shí)現(xiàn)方法進(jìn)行介紹，代碼詳細(xì)，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧

有些時(shí)候，在一個(gè)網(wǎng)頁(yè)的ul li中，存在左右兩個(gè)部分的內(nèi)容，但是右邊元素內(nèi)容又是不固定，左邊元素相對(duì)應(yīng)的不能用固定寬度，所有需要我們動(dòng)態(tài)的獲取右邊元素寬度，來(lái)賦值給左邊元素的marginRight值。

HTML結(jié)構(gòu)：

<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>

最終效果圖：

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javascript面向?qū)ο笾R(shí)很廣泛，想深入理解需要花費(fèi)一些時(shí)間，本文給大家介紹了js面向?qū)ο蟮膭?chuàng)建及相關(guān)屬性介紹，感興趣的小伙伴一起學(xué)習(xí)吧
2017-05-05

使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)

本文詳細(xì)講解了使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

2022-01-01

微信小程序仿朋友圈發(fā)布動(dòng)態(tài)功能

這篇文章主要介紹了微信小程序仿朋友圈發(fā)布動(dòng)態(tài)界面，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

2018-07-07

搭建Bootstrap離線文檔的方法

雖然現(xiàn)在不聯(lián)網(wǎng)的情況很少，但在本機(jī)上搭建一份Bootstrap離線文檔以備不時(shí)之需也是很有必要的。下面就給大家分享下搭建Bootstrap離線文檔的方法，感興趣的朋友一起看看吧

2016-12-12

javascript globalStorage類(lèi)代碼

非IE瀏覽器“userdata”的解決方案

2009-06-06

網(wǎng)頁(yè)廣告中JS代碼的信息監(jiān)聽(tīng)示例

在一些網(wǎng)頁(yè)廣告中提供的JS代碼可以進(jìn)行代碼注入，然后監(jiān)視各種元素，下面有個(gè)示例，大家可以參考下

2014-04-04

js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)總結(jié)

這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

2019-05-05