zoukankan      html  css  js  c++  java
  • 原生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>

    最终效果图:

    是不是很方便!

  • 相关阅读:
    一本通 1259:【例9.3】求最长不下降序列
    一本通 1258:【例9.2】数字金字塔
    洛谷 P1198 [JSOI2008]最大数
    洛谷 P2863 [USACO06JAN]牛的舞会The Cow Prom
    【BZOJ1062】糖果雨(NOI2008)-数形结合+二维树状数组
    【BZOJ4070】雅加达的摩天楼(APIO2015)-分块+最短路
    【BZOJ2326】数学作业(HNOI2011)-递推+矩阵快速幂
    【BZOJ2734】集合选数(HNOI2012)-状压DP
    【BZOJ3213】抛硬币(ZJOI2013)-期望DP+KMP+高精度
    【BZOJ3590】Quare(SNOI2013)-状压DP
  • 原文地址:https://www.cnblogs.com/studycc/p/6179696.html
Copyright © 2011-2022 走看看