如何使用javascript为同一类的多个div更改宽度？_Javascript_Jquery

如何使用javascript为同一类的多个div更改宽度？

javascript jquery

如何使用javascript为同一类的多个div更改宽度？,javascript,jquery,Javascript,Jquery,我试图让javascript增加一个或多个正方形的宽度，如果它的宽度超过某个像素。。。这里的问题是，我在同一个类中有多个div，因此如何让javascript更改宽度增加的div的宽度？我尝试了所有方法，但没有任何用处。。。。非常感谢这是我的密码： <head> <style> body { overflow-x: auto; white-space: nowrap; } .test1 { b

我试图让javascript增加一个或多个正方形的宽度，如果它的宽度超过某个像素。。。这里的问题是，我在同一个类中有多个div，因此如何让javascript更改宽度增加的div的宽度？我尝试了所有方法，但没有任何用处。。。。非常感谢

这是我的密码：

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

有几种方法可以解决这个问题。在这里，我创建了两个示例：

例1：您实施它的方式：

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

新css类：

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

这是一个演示链接：

您可以尝试使用突变观察员来检测元素中的变化。这是我从互联网上得到的例子

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

请尝试使用它。

您可以将class属性从test1更改为test2，并在cssno中设置好的宽度。我正在创建一个站点，其中div中的用户帖子和div是在同一个类上生成的，所以这就是为什么我问我的问题。谢谢您令人惊讶的回答，但我正在尝试让javascript只更改宽度没有增加的div所有的divs虽然它们都共享同一个类，但我知道这听起来很复杂，但我是为一个博客这么做的，如果用户输入太多内容，那么受影响的div将增加宽度，而不是所有divs，所以这里的问题是我如何形成if语句来实现这一点，非常感谢你的回答，但老实说，我不知道但是当我将var foo=document.querySelector'foo'更改为var foo=document.querySelector'.test1'时，没有发生任何效果。。。非常感谢

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

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