我的頁面中有很多圖片，我想隱藏那些高度大于寬度的圖片。我嘗試使用這個簡單的代碼，但它不起作用。超文本標記語言<img src="/path/img_1" class="my_pictures_class"><img src="/path/img_2" class="my_pictures_class"><img src="/path/img_3" class="my_pictures_class"><img src="/path/img_4" class="my_pictures_class"><img src="/path/img_5" class="my_pictures_class">...JSwindow.onload = function() { var i, img; var img = document.getElementsByClassName("my_pictures_class"); for (i = 0; i < img.length; i++) { var width = img.clientWidth; var height = img.clientHeight; if (height>width){ img[i].style.display = "none"; } else{ //Nothing } }};我無法使用 Jquery。
2 回答
揚帆大魚
TA貢獻1799條經驗 獲得超9個贊
您忘記了圖像數組的索引
window.onload = function() {
var i, img;
var img = document.getElementsByClassName("my_pictures_class");
for (i = 0; i < img.length; i++) {
var width = img[i].clientWidth;
var height = img[i].clientHeight;
if (height > width) {
img[i].style.display = "none";
}
}
};
考慮每個
const imgList = document.getElementsByClassName("my_pictures_class");
Array.from(imgList).forEach(img => {
const height = img.clientHeight
const width = img.clientWidth
if (height > width) {
img.style.display = "none";
}
})
夢里花落0921
TA貢獻1772條經驗 獲得超6個贊
您錯過了提及索引。盡管您可以通過使用querySelectorAll()and來避免使用索引forEach()，如下所示：
window.onload = function() {
var imgList = document.querySelectorAll(".my_pictures_class");
imgList.forEach(function(img){
var width = img.clientWidth;
var height = img.clientHeight;
if (height>width){
img.style.display = "none";
}
else{
//Nothing
}
});
};
<img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/serrano.png" class="my_pictures_class">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" class="my_pictures_class">
- 2 回答
- 0 關注
- 165 瀏覽
添加回答
舉報
0/150
提交
取消