未捕获的类型错误：无法读取 javascript 上未定义的属性“样式”答案

【问题标题】：Uncaught TypeError: Cannot read property 'style' of undefined on javascript未捕获的类型错误：无法读取 javascript 上未定义的属性“样式”
【发布时间】：2019-07-24 12:08:08
【问题描述】：

未捕获的类型错误：无法读取未定义的属性“样式”

这是我尝试写入时显示的消息：

/* Opacity Value */
const opacity = 0.4;

/* Set Opacity For First Image */
imgs[0].style.opacity = opacity;

HTML：

<div class="container">
    <div class="main-img">
      <img src="images/6.jpg" id="current" />
    </div>
    <div class="imgs">
      <img src="images/6.jpg" />
      <img src="images/5.jpg" />
      <img src="images/4.jpg" />
      <img src="images/6.jpg" />
    </div>
</div>

完整的 Javascript 代码：

const current = document.querySelector("#current");

const imgs = document.querySelectorAll(".imgs img");

常量不透明度 = 0.4;

imgs[0].style.opacity = 不透明度；

imgs.forEach(img => img.addEventListener("click", imgClick));

函数 imgClick(e) { imgs.forEach(img => (img.style.opacity = 1));

current.src = e.target.src;

current.classList.add("淡入");

setTimeout(() => current.classList.remove("fade-in"), 500);

e.target.style.opacity = 不透明度； }

【问题讨论】：

请分享您的 html 和 js 代码以帮助您。
它基本上说imgs没有元素。所以你不能访问 imgs[0]
那么 imgs[0] 是未定义的。请显示更多代码。
这是我的html
"imgs"

标签： javascript

【解决方案1】：

基本上在下面的行中，你正在做的是 - 你正在调用一个空数组的第一个索引值并且你正在分配它的样式属性。你需要在数组的第一个索引中有值才能使那段代码工作。

imgs[0].style.opacity = opacity;

你可以做的是

const opacity = 0.4;
const imgs = document.querySelectorAll('img');
if(imgs && imgs.length > 1) {
  imgs[0].style.opacity = opacity;
}

您必须在所有 html 代码之后将 JS 代码保留在正文部分的末尾才能使其正常工作。

【讨论】：

【解决方案2】：

let imgs = document.querySelectorAll('.imgs img');
// imgs[0].style.opacity = 0.4; now you can set style to array element 
imgs.forEach((img, idx) => {
	setTimeout(() => {
  	img.style.opacity = 0.4
  }, idx * 500)
})

<div class="container">
    <div class="main-img">
      <img src="images/6.jpg" id="current" />
    </div>
    <div class="imgs">
      <img src="images/6.jpg" />
      <img src="images/5.jpg" />
      <img src="images/4.jpg" />
      <img src="images/6.jpg" />
    </div>
</div>

【讨论】：