最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Increase element width by percentage using jQuery - Stack Overflow

programmeradmin2浏览0评论

This answer by Varinder works well but I would like to get the element width which is set in pixels and increase it by 10%.

$(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: /
         var newWidth = currentWidth + 5; // increment the width
         $this.width(newWidth); // pass in the new width as the parameter.
    });
});

This answer by Varinder works well but I would like to get the element width which is set in pixels and increase it by 10%.

$(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./width/
         var newWidth = currentWidth + 5; // increment the width
         $this.width(newWidth); // pass in the new width as the parameter.
    });
});
Share Improve this question edited May 23, 2017 at 11:52 CommunityBot 11 silver badge asked Aug 20, 2015 at 22:10 Anthony_ZAnthony_Z 7251 gold badge9 silver badges22 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

I think there's several ways to do that, try ;

 var currentWidth = $this.width();

 var newWidth = currentWidth * 1.1; //increment by 10%
 //OR
 var newWidth = currentWidth + ( currentWidth * 10) / 100; //increment by 10%

Hope this helps.

Try to replace the currentWidth with var newWidth = currentWidth * 1.1;

You just have to set the new width to the old width + 10% of the old width:

var newWidth = currentWidth + (currentWidth * 0.1);
发布评论

评论列表(0)

  1. 暂无评论