[英]Modifying all images from div using css and Javascript
所以我有一個包含很多圖像的 div：
<div id="d1">
<img id="img1" src="resources/square.png"/>
<img id="img2" src="resources/square.png"/>
...
</div>
我的 css 文件如下所示：
#d1 img {
width: 5%;
}
那么，是否可以使用javascript修改上面的寬度屬性，而不是遍歷所有圖像？ （我想修改每個圖像的寬度）
您可以使用querySelectorAll並將其與forEach結合使用，為容器內的所有圖像設置屬性。
window.onload = function loop() { document.querySelectorAll('#d1 img').forEach(el => el.setAttribute('width', '300')); }
<div id="d1"> <img id="img1" src="https://via.placeholder.com/100.jpg;"/> <img id="img2" src="https://via.placeholder.com/100.jpg;"/> <img id="img3" src="https://via.placeholder.com/100.jpg;"/> <img id="img4" src="https://via.placeholder.com/100.jpg;"/> <img id="img5" src="https://via.placeholder.com/100.jpg;"/> </div>
像這樣的東西，使用querySelectorAll和 for 循環可以做到這一點，應該給你你想要的。
const images = document.querySelectorAll('#d1 img'); for(var i = 0; i < images.length; i++){ images[i].setAttribute("width", "5%") //Change this to any percent value. }
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="d1"> <img id="img1" src="https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg"/> <img id="img2" src="https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg"/> <img id="img3" src="https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg"/> </div> </body> </html>
在 querySelectorAll 中使用 for 循環的另一種方法是使用forEach循環，這將為您提供相同的結果。
你不必循環。 如果您使用CSS 變量，您可以在您的 CSS 文件中設置img最初使用的變量，然后您可以使用 JS 為所有圖像更新該變量。
setTimeout(() => { document.documentElement.style.setProperty('--width', '50%'); }, 2000);
:root { --width: 5%; } #d1 img { width: var(--width); }
<div id="d1"> <img id="img1" src="resources/square.png"/> <img id="img2" src="resources/square.png"/> </div>
使用CSS或JavaScript從iframe中的網頁上刪除所有圖像
[英]Removing all images from a webpage in an iframe using CSS or JavaScript
使用CSS / JavaScript在頁面中所有圖像的右上角動態放置一個按鈕/ div
[英]Dynamically place a button/div on the top right corner of all images in the page using css/javascript
將類添加到a中的所有圖像 <div> 使用javascript，反之亦然
[英]Adding a class to all the images within a <div> using javascript & vice versa
為網頁中的所有圖像添加類，但特定類別除外 <div> 使用JavaScript
[英]Adding a class to all the images in the webpage except for a particular <div> using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.