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();
3 answers
solution1
1 2018-01-30 23:00:26
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/
solution2
0 2018-01-30 23:26:56
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.
solution3
0 2022-06-27 11:54:32
var x = document.querySelectorAll('.test1');
for(var i = 0; i < x.length; i++){
if(x[i].style.display = "inline-block"){
x[i].style.width = "";
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.