更改字体大小并修改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>