所以我有多个类名为 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);
但它增加了将近 40 像素，我不知道这些是从哪里来的。这些元素上什至没有填充或边距。
我只想附加元素的内部宽度。
谁能提出解决方案，或者看看为什么 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
最佳答案
需要指出的是，您使用的是纯 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.
});
});
关于javascript - 使用 jQuery 或 JS 增加元素宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22134943/