JS新手求助：如何编写代码实现字体控制及交互样式功能？

Hey there! Let's tackle this JavaScript requirement step by step. I'll break down the solution into HTML structure, CSS styling, and JavaScript logic so it's easy to follow and adapt to your project.

HTML Structure #

First, let's set up the basic HTML with the fontControl container and sample <article> elements. We'll use data attributes to store the target font sizes directly on the links—this keeps our code clean and avoids hardcoding values in JavaScript:

<div id="fontControl">
  <a href="#" data-size="0.8em">Small</a>
  <a href="#" data-size="1.0em" class="active">Normal</a>
  <a href="#" data-size="1.3em">Large</a>
</div>

<article>
  <p>This is sample text in an article. Click the font size links above to adjust my size!</p>
</article>
<article>
  <p>Another article here. All articles will update their font size together when you click a link.</p>
</article>

CSS Styling #

We'll handle the hover state and default/active link colors with CSS (this is more efficient than using JavaScript for hover effects, since browsers optimize CSS states natively):

#fontControl a {
  padding: 4px 8px;
  margin: 0 4px;
  color: #888; /* Default gray color for inactive links */
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s; /* Smooth hover transition */
}

#fontControl a:hover {
  background-color: white; /* White background on hover */
}

#fontControl a.active {
  color: #007bff; /* Blue color for the selected active link */
}

JavaScript Logic #

Now add the JavaScript to handle click events, update font sizes, and toggle active states:

// Grab all the elements we need to work with
const fontControl = document.getElementById('fontControl');
const sizeLinks = fontControl.querySelectorAll('a');
const articles = document.querySelectorAll('article');

// Helper function to reset all links back to default gray
function resetLinkStyles() {
  sizeLinks.forEach(link => {
    link.classList.remove('active');
  });
}

// Attach click event listeners to each size link
sizeLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // Stop the link from reloading the page
    
    // Reset all links to inactive state first
    resetLinkStyles();
    
    // Mark the clicked link as active (blue color)
    link.classList.add('active');
    
    // Get the target font size from the link's data attribute
    const targetSize = link.dataset.size;
    
    // Update the font size for every <article> element
    articles.forEach(article => {
      article.style.fontSize = targetSize;
    });
  });
});

How It Works #

• Data Attributes: The data-size attribute on each link stores the exact font size we want to apply, making our code flexible (you can easily add more size options later without changing the JS).
• CSS Hover: Using CSS :hover ensures smooth, performant hover behavior without relying on JavaScript mouse events.
• Active State Toggle: The resetLinkStyles function guarantees only the clicked link stays blue, while others revert to gray immediately.
• Batch Article Update: We loop through all <article> elements to apply the font size change to every one at once, so all content updates consistently.

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