使用JS修改Bootstrap卡片图片宽高报错：Cannot set properties of undefined

报错原因 #

document.getElementsByClassName()返回的是HTMLCollection类数组对象，包含所有匹配指定class的元素，而非单个DOM元素。直接访问cards.style会得到undefined，因此触发"Cannot set properties of undefined"错误。

解决方案 #

根据需求选择以下任意一种方式：

1. 修改所有匹配的图片样式 #

遍历HTMLCollection，逐个为元素设置样式：

let cards = document.getElementsByClassName('card-img-top');
// 方式1：for循环遍历
for (let i = 0; i < cards.length; i++) {
  cards[i].style.height = '20px';
  cards[i].style.width = '20px';
}

// 方式2：转换为数组后使用forEach
Array.from(cards).forEach(card => {
  card.style.height = '20px';
  card.style.width = '20px';
});

2. 仅修改第一个匹配的图片样式 #

直接取集合的第一个元素，同时判断元素是否存在避免报错：

let card = document.getElementsByClassName('card-img-top')[0];
if (card) {
  card.style.height = '20px';
  card.style.width = '20px';
}

替代方案：使用querySelector/querySelectorAll #

• 单个元素：用querySelector直接获取第一个匹配元素

let card = document.querySelector('.card-img-top');
if (card) {
  card.style.height = '20px';
  card.style.width = '20px';
}

• 所有元素：用querySelectorAll获取NodeList，原生支持forEach遍历

let cards = document.querySelectorAll('.card-img-top');
cards.forEach(card => {
  card.style.height = '20px';
  card.style.width = '20px';
});

内容的提问来源于stack exchange，提问作者Tanmay Sharma