求助：如何通过HTML/CSS修改按钮上的文本字体大小

Hey there! Let's tackle this button issue you're having—since you mentioned you couldn't find a fix via Google, I'll walk through the most common problems and solutions for your code.

First, let's look at your original code snippet:

<center><p><button style="height:50px;width:200px" onclick="myFunction()" id="button">Show More</button></p></center><br>

The #1 Most Likely Issue: Missing myFunction() Definition #

The button is set to run myFunction() when clicked, but if you haven't written that function anywhere, nothing will happen. Let's add a working implementation that toggles hidden content (the typical use case for a "Show More" button):

<center><p><button style="height:50px;width:200px" onclick="myFunction()" id="button">Show More</button></p></center>
<br>
<!-- Hidden content to reveal -->
<div id="hiddenContent" style="display: none;">
  Here's the extra content you wanted to show! 🎉
</div>

<script>
function myFunction() {
  const button = document.getElementById("button");
  const content = document.getElementById("hiddenContent");
  
  // Toggle content visibility and button text
  if (content.style.display === "none") {
    content.style.display = "block";
    button.textContent = "Show Less";
  } else {
    content.style.display = "none";
    button.textContent = "Show More";
  }
}
</script>

Bonus: Modernize Your Code (Best Practices) #

The <center> tag is outdated in HTML5, and inline styles/onclick attributes are less maintainable. Here's a cleaner, more modern version using CSS and event listeners:

<style>
  .button-wrapper {
    text-align: center; /* Replace <center> tag */
    margin-bottom: 1rem;
  }
  #button {
    height: 50px;
    width: 200px;
    cursor: pointer;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 4px;
  }
  #hiddenContent {
    display: none;
    padding: 1rem;
    border: 1px solid #eee;
  }
</style>

<div class="button-wrapper">
  <button id="button">Show More</button>
</div>

<div id="hiddenContent">
  Here's the extra content you wanted to show! 🎉
</div>

<script>
const button = document.getElementById("button");
const content = document.getElementById("hiddenContent");

// Use addEventListener instead of inline onclick
button.addEventListener("click", () => {
  const isHidden = content.style.display === "none";
  content.style.display = isHidden ? "block" : "none";
  button.textContent = isHidden ? "Show Less" : "Show More";
});
</script>

If you're facing a specific issue beyond this (like the button not styling correctly, or the function not triggering even when defined), feel free to share more details about what's happening!

内容的提问来源于stack exchange，提问作者Jeremy