原生JS获取元素集合的子元素宽度实例

 更新时间:2016年12月14日 16:08:55   转载 作者:知乎其微  
本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍,代码详细,具有很好的参考价值,需要的朋友一起来看下吧

有些时候,在一个网页的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>

最终效果图:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • javascript去掉代码里面的注释

    javascript去掉代码里面的注释

    这篇文章主要介绍了javascript去掉代码里面的注释的方法和具体代码,有需要的小伙伴可以参考下。
    2015-07-07
  • javascript实现日期时间动态显示示例代码

    javascript实现日期时间动态显示示例代码

    这篇文章主要介绍了javascript实现日期时间动态显示示例代码,页面动态显示时间变化的方法有很多,本文为大家介绍下使用javascript的具体实现,感兴趣的朋友可以参考一下
    2015-09-09
  • JS+CSS实现仿雅虎另类滑动门切换效果

    JS+CSS实现仿雅虎另类滑动门切换效果

    这篇文章主要介绍了JS+CSS实现仿雅虎另类滑动门切换效果,涉及JavaScript响应鼠标事件及针对页面元素的嵌套循环遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 微信小程序实现根据字母选择城市功能

    微信小程序实现根据字母选择城市功能

    这篇文章主要为大家详细介绍了微信小程序中根据字母选择城市的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js实现touch移动触屏滑动事件

    js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象)。这个对象封装一次屏幕触摸,一般来自于手指。它在touch事件触发的时候产生,可以 通过touch event handler的event对象取到
    2015-04-04
  • 跟我学习javascript创建对象(类)的8种方法

    跟我学习javascript创建对象(类)的8种方法

    跟我学习javascript创建对象(类)的8种方法,每一种方法都有详细的介绍,不知道javascript如何创建对象的朋友,不要错过这篇文章。
    2015-11-11
  • layer弹出层扩展主题的方法

    layer弹出层扩展主题的方法

    今天小编就为大家分享一篇layer弹出层扩展主题的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS中多种方式创建对象详解

    JS中多种方式创建对象详解

    下面小编就为大家带来一篇JS中多种方式创建对象详解。小编觉得挺不错的。现在分享给大家,给大家一个参考。一起跟随小编过来看看吧
    2016-03-03
  • js中跨域方法原理详解

    js中跨域方法原理详解

    这篇文章主要介绍了js中跨域方法原理详解的相关资料,需要的朋友可以参考下
    2015-07-07
  • Javascript实现的CSS代码高亮显示

    Javascript实现的CSS代码高亮显示

    到网上一位别出心裁的高手使用字符串而不是正则表达式实现了Javascript代码高亮显示,自己受益匪浅,于是就构思了CSS代码的高亮显示。
    2009-11-11

最新评论