使用jQuery或JS增加元素宽度 [英] increase element width using jQuery or JS
问题描述
所以我有类名为 ml 的多个元素，所有不同的宽度，因为不同的文本内容（不在CSS中设置）。
例如：
So I have multiple elements with class name ml, all different widths because of different text contents (not set in CSS).
for example:
<li><a class="depth ml" title="">Login</a></li>
我想为它们添加一个新宽度， + = 5px 元素的内部宽度
I would like to append a new width to all of them, +=5px of the element's inner width
我试过这样做，使用jQuery：
I've tried doing this, using 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，我不知道这些来自哪里。这些元素上甚至没有填充或边距。
but it added almost 40px, which I don't know where those came from. There isn't even padding or margins on those elements.
我只想添加元素的内部宽度。
I just want the element's inner width appended.
任何人都可以建议解决方案，或者查看为什么jQuery不工作？
Can anyone suggest a solution, or see why the jQuery isn't working?
编辑：
以下是标记：
<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
note: .ml has no css
p>
Just to point out, you're using pure JS -which is very brave of you ;) anyway, with jQuery, you could try something like below:
$(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.
});
});
这篇关于使用jQuery或JS增加元素宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
