更改字體大小和修改JavaScript顯示/隱藏切換

Question

我在Javascript總初學者，我碰到這個劇本來，爲要顯示/隱藏切換：

<script language="javascript"> 
function toggle() { 
var ele = document.getElementById("toggleText"); 
var text = document.getElementById("displayText"); 
if(ele.style.display == "block") { 
ele.style.display = "none"; 
text.innerHTML = "show"; 
} 
else { 
ele.style.display = "block"; 
text.innerHTML = "hide"; 
} 
} 
</script> 

我想更改字體大小此代碼中的「顯示」和「隱藏」。看起來像一個非常簡單的任務，但我到處看，無法找到答案。

另外一個問題，我怎麼可能修改代碼，這樣我就不必複製和粘貼整個代碼，改變toggle()到toggle2()，toggle3()在同一頁上的每個單獨的顯示/隱藏切換？

非常感謝！

Answer 1

您不必創建toggle2，toggle3，這會使您的代碼變得冗餘。相反，在切換上添加一個參數以傳遞toggleText。

<script language="javascript"> 
function toggle(toggleText) { 
var ele = document.getElementById(toggleText); 
var text = document.getElementById("displayText"); 
if(ele.style.display == "block") { 
ele.style.display = "none"; 
text.innerHTML = "show"; 
} 
else { 
ele.style.display = "block"; 
text.innerHTML = "hide"; 
} 
} 
</script> 

對於字體，你可以在你的CSS。

<style> 
#displayText { 
    font: bold 12px Georgia, serif; 
} 
</style> 

Answer 2

您可以使用element.style.fontSize動態設置元素的字體大小。

function toggle() { 
 
    var ele = document.getElementById("toggleText"); 
 
    var text = document.getElementById("displayText"); 
 
    if(ele.style.display == "block") { 
 
    ele.style.display = "none"; 
 
    text.style.fontSize = "50px"; 
 
    text.innerHTML = "show"; 
 
    } else { 
 
    ele.style.display = "block"; 
 
    text.style.fontSize = "30px"; 
 
    text.innerHTML = "hide"; 
 
    } 
 
} 
 

 
document.getElementById("displayText").addEventListener('click', function(){ 
 

 
\t \t toggle(); 
 

 
});

#toggleText{ 
 
    display:none; 
 
} 
 
#displayText{ 
 
    color: #00af00; 
 
    background: #d9d9d9; 
 
    padding: 4px 20px; 
 
    display: inline-block; 
 
    text-decoration:none; 
 
}

<p id="displayText">show</p> 
 
<div id="toggleText"> 
 
Hidden or naw? 
 
</div>