更改字體大小並修改Javascript顯示/隱藏切換

Question

我是Java語言的初學者，我在此腳本中進行了顯示/隱藏切換：

<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>

我想在此代碼中更改“顯示”和“隱藏”的字體大小。 似乎是一項非常簡單的任務，但是我到處都是，找不到答案。

還有另一個問題，我該如何修改代碼，而不必復制和粘貼整個代碼，也toggle3()為同一頁面上的每個單獨的顯示/隱藏切換將toggle()更改為toggle2() ， toggle3() ？

非常感謝你！

Answer 1

您可以使用element.style.fontSize動態設置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(){ 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> 

Answer 2

您不必創建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>