原生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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
原生js编写2048小游戏
Mar 17 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
vue文件运行的方法教学
Feb 12 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基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Pycharm如何打断点的方法步骤
2019/06/13 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
机关单位动员会主持词
2014/03/20 职场文书
市场总经理岗位职责
2014/04/11 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
会议简讯范文
2015/07/20 职场文书
班主任寄语2016
2015/12/04 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python