Question

我试图让javascript增加一个（或多个）方块的宽度，如果它的宽度超过某个像素...这里的问题是我有多个具有相同类的div，所以我该如何制作javascript更改宽度增加的宽度只有我尝试了一切但没有使用....并且非常感谢...

这是我的代码：

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

Answer 1

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

示例1： 你实现它的方式：

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

注意：如果您使用querySelectorAll，则会获得所有元素的NodeList。为了选择这些元素，你必须使用for循环来循环它们。

示例2： 使用javascript直接添加类而不是更改宽度。我建议使用示例nr。 2.让您的网站响应更容易。

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

新的css课程：

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

这是一个演示链接： https://jsfiddle.net/h5gyeqj9/20/

Answer 2

您可以尝试使用Mutation Observers来检测元素中的更改。这是我从互联网上获得的例子。

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

请尝试使用它。

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

2 个答案: