increase element width using jQuery or JS

Question

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>

I would like to append a new width to all of them, +=5px of the element's inner width

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';
}

Nothing happened.

I tried using offsetWidth and clientWidth

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

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.

enter image description here

Can anyone suggest a solution, or see why the jQuery isn't working?

EDIT:

Here is the markup:

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

and the relevant 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;
}

note: .ml has no css

Varinder · Accepted Answer · 2014-03-04 02:56:26Z

1

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

edited Mar 4, 2014 at 2:56

answered Mar 2, 2014 at 23:14

Varinder

2,6641 gold badge18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

toms Over a year ago

I am still getting 40px more than I should.. Any idea why this could be happening?

Varinder Over a year ago

could you post your markup? maybe you've got nested .ml elements?

Varinder Over a year ago

Interesting, seems to be working fine, heres a quick fiddle: jsfiddle.net/Varinder/vRyFk that shows width of all .ml elements before and after incrementing it.

toms Over a year ago

have a look here. the items in the top menus are .ml. I set the width to -=15, but they are larger by almost 30px than original width.

Varinder Over a year ago

Maybe the page was still applying css styles when .each method was called? could you try the updated snippet in my answer and see if that makes a difference?

KokaKiwi · Accepted Answer · 2014-03-02 23:26:10Z

0

In your code:

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

resolve to an undefined value, because DOM object doesn't have width property (only jQuery object have this one).

So the next statement (curr_width+num) is incorrect because you want to add an undefined value with a number.

answered Mar 2, 2014 at 23:26

KokaKiwi

6057 silver badges14 bronze badges

1 Comment

toms Over a year ago

This doesn't really suggest a solution. But thanks for pointing out the problem.

Collectives™ on Stack Overflow

increase element width using jQuery or JS

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related