点击页面链接跳转后，能否通过ID修改目标页面的Class？

Absolutely feasible! The approach depends on whether you're modifying the element within Page 02's own context or trying to control it from Page 01 after navigation:

1. Modify elements directly in Page 02 (most common scenario) #

This is straightforward and fully supported. Here's how to implement it:

• First, make sure the target element in Page 02 has a unique ID, like this:

  <div id="targetElement">Content to update</div>
  

• Add JavaScript in Page 02 to manipulate the element once the DOM is fully loaded:

  // Wait for the DOM to be ready before executing
  document.addEventListener('DOMContentLoaded', () => {
    const target = document.getElementById('targetElement');
    
    // Recommended: Use classList for flexible class management
    target.classList.add('new-highlight-class'); // Add a new class
    target.classList.remove('old-muted-class'); // Remove an existing class
    target.classList.toggle('toggle-visibility'); // Toggle a class on/off
    
    // Alternative: Replace all classes (not recommended if the element has other existing classes)
    // target.className = 'completely-new-class';
  });
  

The classList API is the better choice here because it lets you adjust individual classes without overwriting any other classes the element might have.

2. Control Page 02's element from Page 01 (edge case) #

If you want to trigger the class change from Page 01 after navigating to Page 02, note that a standard <a> tag navigation will destroy Page 01's context—meaning Page 01's scripts can no longer affect Page 02. However, if you open Page 02 in a new window/tab and both pages share the same origin (same protocol, domain, and port), you can make this work:

// In Page 01's script
const page2Window = window.open('page2.html');

// Wait for Page 02 to finish loading before manipulating its DOM
page2Window.addEventListener('load', () => {
  const target = page2Window.document.getElementById('targetElement');
  target.classList.add('triggered-from-page1');
});

⚠️ Important: This only works if Page 01 and Page 02 are same-origin. Browsers block cross-origin DOM access to protect user security.

In short: For the typical use case of modifying Page 02's own elements, this is totally doable with basic DOM manipulation. Cross-page control has strict limitations tied to browser security rules.

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