原生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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
Vue实现点击显示不同图片的效果
Aug 10 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将数据导入到Foxmail
2006/10/09 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python判断telnet通不通的实例
2019/01/26 Python
python异常触发及自定义异常类解析
2019/08/06 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
JAVA程序员面试题
2012/10/03 面试题
大学生撤销处分思想汇报
2014/09/12 职场文书
神龙架导游词
2015/02/11 职场文书
公司车队管理制度
2015/08/04 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL