原生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 相关文章推荐
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
解析js如何获取css样式
Dec 11 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
React简单介绍
May 24 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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 禁止页面缓存输出
2009/01/07 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
jQuery的学习步骤
2011/02/23 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
JavaScript中的全局对象介绍
2015/01/01 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
python del()函数用法
2013/03/24 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
Python3 操作符重载方法示例
2017/11/23 Python
python实现简易版计算器
2020/06/22 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
用python实现名片管理系统
2020/06/18 Python
python中time包实例详解
2021/02/02 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
家教广告词
2014/03/19 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2016银行求职自荐信
2016/01/28 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
实现一个简单得数据响应系统
2021/11/11 Javascript