Question

所以我有多个带有类名ml的元素，所有宽度都不同，因为文本内容不同（未在CSS中设置）。例如：

<li><a class="depth ml" title="">Login</a></li>

我想为所有元素添加一个新宽度，+=5px元素的内部宽度

我尝试过这样做，使用jQuery：

var elems = document.getElementsByClassName('ml'); 
for ( var i = 0; i < elems.length; i++ ) {
    var num = 5;
    var curr_width = elems[i].width();
    elems[i].style.width=(curr_width+num)+'px';
}

什么都没发生。

我尝试使用offsetWidth和clientWidth

var curr_width = parseInt(elems[i].offsetWidth);

但它增加了近40px，我不知道它们来自哪里。这些元素上甚至没有填充或边距。

我只想要附加元素的内部宽度。

enter image description here

有人可以提出解决方案，或者看看为什么jQuery不起作用？

修改

这是标记：

<body>
    <div id="master_container">
        <div class="container">
           <div id="body">
               <header>
                <div id="homelink"></div>
                    <div id="links" class="topmenulist">
                        <ul id="nav" class="title">
                            <li><a class="depth ml" title="home">Home</a></li>
                            <li><a class="depth ml" title="BBTV1">BBTV1</a></li>
                            <li><a class="depth ml" title="BBTV">BBTV</a></li>
                            <li><a class="depth ml" title="About us" style="">About us</a></li>
                        </ul>
                    </div>
               </header>

和相关的CSS：

.depth {
    position: relative;
    font-size:25px;
    text-decoration:none;
    letter-spacing:2px;
    text-transform:uppercase;
    color: rgba(42,41,36,1.00);
}

.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    font-size:25px;
    text-decoration:none;
    letter-spacing:2px;
    position: absolute;
}

.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

/*_______________ NAVIGATOR _________________*/

#links {
    position:relative;
    left:469px;
    top:80px;
    width: 489px;
    height:53px;
    padding:0px;
    padding-left:0px;
    z-index:9999;
}

.topmenulist #nav {
    list-style:none;
    padding:0;
    padding-top:10px;

}

.topmenulist #nav li {
    float:left;
    display:block;
    position:relative;
    text-indent:0px;
    margin-left:0px;

}

.topmenulist #nav li a {
    margin:0px;
    padding:0px;
    display:block;
    font-size:25px;
    text-decoration:none;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(41,17,3,0.60);
    text-wrap:suppress;
}

注意：.ml没有css

Answer 1

要指出的是，你正在使用纯粹的JS--你非常勇敢;）无论如何，使用jQuery，你可以尝试下面的内容：

$(window).load(function() {
    $(".ml").each(function() { // this is kindof sugary way of doing for loop over array of elements - which is $(".ml")
         var $this = $(this); // the current jQueried .ml element
         var currentWidth = $this.width(); // get width of current element, width is a jQuery method: https://api.jquery.com/width/
         var newWidth = currentWidth + 5; // increment the width
         $this.width(newWidth); // pass in the new width as the parameter.
    });
});

Answer 2

在您的代码中：

var curr_width = elems[i].width();

解析为undefined值，因为DOM对象没有width属性（只有jQuery对象具有此属性）。

因此，下一个语句(curr_width+num)不正确，因为您要使用数字添加未定义的值。

使用jQuery或JS增加元素宽度

2 个答案: