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>

我想改变＆＃34; show＆＃34;的字体大小。并且＆＃34;隐藏＆＃34;在这段代码中。这似乎是一项非常简单的任务，但我到处寻找，无法找到答案。

另一个问题是，如何修改代码，以便我不必复制和粘贴整个代码，并将toggle()更改为toggle2()，toggle3()在同一页面上单独显示/隐藏切换？

非常感谢！

Answer 1

您可以使用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>

更改字体大小和修改Javascript显示/隐藏切换

2 个答案: