使用jQuery或JS增加元素宽度

所以我有多个元素，类名为ml，由于不同的文本内容（未在CSS中设置），所有不同的宽度。例如：使用jQuery或JS增加元素宽度

<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);

，但它增加了近40像素，我不知道那些是从哪里来的。这些元素甚至没有填充或边距。

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

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

来源

2014-03-02 toms

只是为了点out，你使用的是纯粹的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. 
    }); 
});

来源

2014-03-02 23:14:47 Varinder

我仍然得到40像素比我更应该..任何想法，为什么这可能发生？ – toms

你可以发布你的标记吗？也许你有嵌套的'''.ml'''元素？ – Varinder

我已经添加了标记和CSS – toms

在您的代码：

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

解析为undefined值，因为DOM对象不具有width财产（只有jQuery对象有这个）。

所以，因为要与一些添加一个未定义值的下一个语句(curr_width+num)不正确。

来源

2014-03-02 23:26:10 KokaKiwi

这并不是真的建议解决方案。但是谢谢你指出了这个问题。 – toms

使用jQuery或JS增加元素宽度

回答

相关问题