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


Posted in Javascript onDecember 14, 2016

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

最终效果图:

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

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

Javascript 相关文章推荐
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
微信小程序 require机制详解及实例代码
Dec 14 #Javascript
js实现获取鼠标当前的位置
Dec 14 #Javascript
详解vue.js组件化开发实践
Dec 14 #Javascript
JavaScript Ajax实现异步通信
Dec 14 #Javascript
微信小程序 配置文件详细介绍
Dec 14 #Javascript
微信小程序 闭包写法详细介绍
Dec 14 #Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 #Javascript
You might like
php上传图片生成缩略图(GD库)
2016/01/06 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
django反向解析和正向解析的方式
2018/06/05 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
工厂门卫岗位职责
2013/11/25 职场文书
数控个人求职信范文
2014/02/03 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
主持人开场白台词
2015/05/29 职场文书
走近毛泽东观后感
2015/06/04 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
react 路由Link配置详解
2021/11/11 Javascript
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python