How to change width using javascript for multiple divs with same class?

Question

I am trying to make javascript to increase the width of one (or more than one )square if its width is above certain pixel... the problem here is that I have multiple divs with the same class so how can I make javascript change the width of the one that has it's width increased only I TRIED EVERYTHING BUT OF NO USE .... and thanks alot ...

HERE IS MY CODE :

<head>
<style>
    body {
        overflow-x: auto;
          white-space: nowrap;
    }

    .test1 {
        background: blue;
        height: 157px;
        width:321px;
        margin:5px;
        display: inline-block
    }



    </style>
</head>
<body>


    <div class="test1" ></div>  <div class="test1" ></div>  <div class="test1" ></div>  <div class="test1" ></div>
        <div class="test1" ></div>
        <div class="test1" ></div>
 <div class="test1" ></div>
     <div class="test1" ></div>
     <div class="test1" ></div>
     <div class="test1" ></div>
     <div class="test1" ></div>
    <br>
     <div class="test1" ></div>
    <div class="test1" ></div>
    <div class="test1", id="change" ></div>
    <div class="test1" ></div>
    <div class="test1" ></div>
    <div class="test1" ></div>
    <div class="test1" ></div>
    <div class="test1" ></div>   

   <script src="java.js"></script> 
</body>

JAVASCRIPT :

function changewidth() { 

    var x = document.querySelectorAll(".test1");
    if (x.style.width > '321px') {
        x.style.width = '500px'
    }
}

changewidth();

you can change the class attribute from test1 to test2 and set the good width in the css — Peter
– Peter, Commented Jan 30, 2018 at 22:41
no I am building a site where user posts inside div and divs are generated on same class so that's why i asked my question — JOJO
– JOJO, Commented Jan 30, 2018 at 22:46

JiiB · Accepted Answer · 2018-01-30 23:00:26Z

1

There are several ways you can solve the problem. Here I have created two examples:

Example 1: The way you implemented it:

function changewidth() { 
    var x = document.querySelectorAll(".test1");
    for(var i = 0; i < x.length; i++) {    
        x[i].style.width = '500px';
    }
}

Note: If you use querySelectorAll you get a NodeList of all elements. In order to select these elements, you have to loop over them, using a for loop for example.

Example 2: Adding a class instead of changing the width directly with javascript. I suggest to use example nr. 2. It will be easier to make your site responsive.

function addClass() {
    var x = document.querySelectorAll(".test1");
    for (var i = 0; i < x.length; i++) {
        x[i].classList.add('w-100');
    }
}

new css class:

.w-100 {
   width: 100px !important;
}

Here is a demo link: https://jsfiddle.net/h5gyeqj9/20/

answered Jan 30, 2018 at 23:00

JiiB

1,4381 gold badge13 silver badges27 bronze badges

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

1 Comment

JOJO Over a year ago

thanks for your AMAZING answer but I am trying to make javascript change ONLY the div whom width is increased not all the divs(although they all share the same class) I KNOW this sound complicated but I am doing this for a blog if user input too much content then the affected div will increase width NOT all the divs so the problem here how can I form the if statement to make it do that AND THANKS ALOT

Khoi Ngo Nguyen · Accepted Answer · 2018-01-30 23:26:56Z

0

You can try with Mutation Observers to detect changes in an element. Here is the example which I get from internet.

var foo = document.querySelector('#foo'),
  oldWidth = foo.style.width,
  observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.target === foo && mutation.attributeName === 'style' &&
            oldWidth !== foo.style.width) {
          console.log('Width Changed!');
          oldWidth = foo.style.width;
        }
    });    
  });

// configuration of the observer, just look for attribute changes:
var config = {
  attributes: true
};

observer.observe(foo, config);

Please try with it.

answered Jan 30, 2018 at 23:26

Khoi Ngo Nguyen

1745 bronze badges

1 Comment

JOJO Over a year ago

thanks for your answer but honestly I don't know about mutation observer but when I changed the var foo = document.querySelector('#foo'), to var foo = document.querySelector('.test1') no effect took place ... thanks alot

Shayaan · Accepted Answer · 2022-06-27 11:54:32Z

0

var x = document.querySelectorAll('.test1');

for(var i = 0; i < x.length; i++){
    if(x[i].style.display = "inline-block"){
        x[i].style.width = "";
    }
}

answered Jun 27, 2022 at 11:54

Shayaan

11 bronze badge

Collectives™ on Stack Overflow

How to change width using javascript for multiple divs with same class?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related