無法在幻燈片錯誤中讀取未定義的屬性“樣式”

Question

我是 javascript 新手，我正在嘗試在 div 中創建幻燈片。 但是，當我這樣做時，會給我錯誤消息

未捕獲的類型錯誤：無法在 script.js:1 處的幻燈片放映 (script.js:14) 中讀取未定義的屬性“樣式”

這是我的 HTML 代碼：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <script type="text/javascript" src="script.js"></script>
        <div id="wrapper">
            <div id="content">
                <div id="top">
                    <img class="slide" src="1.png" style="width:100%">
                    <img class="slide" src="2.png" style="width:100%">
                </div>
                <div id="left">
                </div>
                <div id="middle">
                </div>
                <div id="right">
                </div>
            </div>
        </div>
    </body>
</html>

這是我的 CSS 代碼：

.slide {
    display:none;
}

這是我的 Javascript 代碼：

slideshow();

function slideshow() {
    var index = 0;
    var i;
    var slides = document.getElementsByClassName("slide");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    index++;
    if (index > slides.length) {
        index = 1;
    }    
    slides[index-1].style.display = "block";  
    setTimeout(slideshow, 2000);
}

我認為問題是當它們在 div 中時 javascript 無法訪問圖像。

Answer 1

1.您將<script>文件放在幻燈片之前。 所以當你的腳本第一次被執行時，標記還不存在於DOM 。
因為你的幻燈片不存在，在初始for （什么都不做）之后，你會看到這一行

slides[index-1].style.display = "block";

但是slides[0]不存在，所以它沒有.style屬性。

2.每次重新運行該函數時，您都將0的值重新分配給index ，因此它將始終顯示相同的幻燈片：第一張。

(3.)您選擇display作為顯示/隱藏幻燈片的方法，該方法不可動畫。 因此，你的幻燈片會突然改變，沒有過渡的可能性。

(4.)另外，就個人選擇而言，我更喜歡document.querySelectorAll('.slide')到document.getElementsByClassName("slide") 。 我不知道確切的原因。 可能是因為它更短，也可能是因為它允許更靈活的選擇器語法（類、ID、屬性或任何其他有效的css選擇器）。

無法在幻燈片錯誤中讀取未定義的屬性“樣式”

問題描述

1 個解決方案

解決方案1
6 已采納 2017-02-02 19:49:23

無法在幻燈片錯誤中讀取未定義的屬性“樣式”

問題描述

1 個解決方案

解決方案1 6 已采納 2017-02-02 19:49:23

解決方案1
6 已采納 2017-02-02 19:49:23