我創建了一個關閉/打開按鈕，但第一次使用它時，您需要單擊兩次

我試圖創建此按鈕：單擊按鈕（某些文本）時，將出現其他文本。然後當你再次點擊它會消失。與我現在的代碼的問題是，它第一次符文你需要點擊它twiceto顯示文本。我創建了一個關閉/打開按鈕，但第一次使用它時，您需要單擊兩次

document.getElementById('read').onclick = function() { 
    var element = document.getElementById('text01'); 
    if(element.style.display === 'none'){ 
     element.style.display = 'inherit'; 
    } else { 
     element.style.display = 'none'; 
    } 
} 

<div id="read">Read more</div></p> 
<p id="text01">Vestibulum tempus nulla accumsan aliquet lacinia. Curabitur scelerisque augue nec nunc fermentum, ac cursus est sollicitudin. Mauris gravida nisi dui, hendrerit volutpat nibh scelerisque aliquet. Nullam efficitur volutpat tellus.</p>

來源

2015-09-11 Aphryv

@kyll修復它，對不起X） – Aphryv

的是初始狀態'無'或其他什麼？ – Chrillewoodz

您錯過了標題中的「u」，現在您的文本末尾有錯字= p –

JavaScript可以使用style來設置CSS屬性，但它不能讀取它們，除非它們之前使用JavaScript進行設置。

要訪問一個樣式表中定義的屬性，使用getComputedStyle()代替：

document.getElementById('read').onclick = function() { 
 
    var element = document.getElementById('text01'); 
 
    if(getComputedStyle(element).getPropertyValue('display') === 'none'){ 
 
     element.style.display = 'inherit'; 
 
    } else { 
 
     element.style.display = 'none'; 
 
    } 
 
}

#text01 { 
 
    display: none; 
 
}

<div id="read">Read more</div></p> 
 
<p id="text01">Vestibulum tempus nulla accumsan aliquet lacinia. Curabitur scelerisque augue nec nunc fermentum, ac cursus est sollicitudin. Mauris gravida nisi dui, hendrerit volutpat nibh scelerisque aliquet. Nullam efficitur volutpat tellus.</p>

或者，你可以簡單地切換你的兩個條件。 element.style.display將默認爲空字符串的第一次運行它，在這種情況下，它會開始inherit和none之間切換：

document.getElementById('read').onclick = function() { 
 
    var element = document.getElementById('text01'); 
 
    if(element.style.display === 'inherit'){ 
 
     element.style.display = 'none'; 
 
    } else { 
 
     element.style.display = 'inherit'; 
 
    } 
 
}

#text01 { 
 
    display: none; 
 
}

<div id="read">Read more</div></p> 
 
<p id="text01">Vestibulum tempus nulla accumsan aliquet lacinia. Curabitur scelerisque augue nec nunc fermentum, ac cursus est sollicitudin. Mauris gravida nisi dui, hendrerit volutpat nibh scelerisque aliquet. Nullam efficitur volutpat tellus.</p>

來源

2015-09-11 21:15:25

如果您的應用要求您兩次按下按鈕，它因「element.style.display」比「無」以外的東西的初始值是更可能的。我將使用一個小的調試腳本來提取「element.style.display」的初始值。

如果值不是「無」，那麼在第一個按鈕按下後，您的代碼將使其成爲「無」，然後在第二個按鈕按下時「繼承」。

來源

2015-09-11 21:15:05 ZaxLofful

我創建了一個關閉/打開按鈕，但第一次使用它時，您需要單擊兩次

回答

相關問題