使用Tampermonkey将节点文本值作为CSS类添加至父元素

Got it, let's solve this. You want to take the text from each span.labelsElement-name element and add that text as a CSS class to its parent div.labelsElement-label (the immediate parent in your HTML structure). Here's a Tampermonkey script that does exactly that, including support for dynamically loaded labels:

The Script #

// ==UserScript==
// @name         Add Label Text to Parent Class
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Takes text from span.labelsElement-name and adds it as a CSS class to its parent div.labelsElement-label
// @author       Your Name
// @match        *://*/*  // Update this to target your specific website(s)
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to process a single label span
    function processLabelSpan(span) {
        const parentDiv = span.closest('div.labelsElement-label');
        if (!parentDiv) return;

        // Clean up the label text for CSS class compatibility
        const labelClass = span.textContent.trim().toLowerCase();
        // Only add the class if it doesn't already exist
        if (!parentDiv.classList.contains(labelClass)) {
            parentDiv.classList.add(labelClass);
        }
    }

    // Process existing labels on page load
    document.querySelectorAll('span.labelsElement-name').forEach(processLabelSpan);

    // Handle dynamically loaded labels (e.g., AJAX content)
    const mutationObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType !== Node.ELEMENT_NODE) return;

                // Check if the added node is a label span, or find spans inside it
                const targetSpans = node.matches('span.labelsElement-name') 
                    ? [node] 
                    : node.querySelectorAll('span.labelsElement-name');
                
                targetSpans.forEach(processLabelSpan);
            });
        });
    });

    // Start observing the document for new elements
    mutationObserver.observe(document.body, { childList: true, subtree: true });
})();

Key Details #

• Targeting Elements: The script uses querySelectorAll to grab all existing span.labelsElement-name elements on page load. For each span, it uses closest('div.labelsElement-label') to reliably find its parent container (this works even if the HTML structure has extra nested elements between the span and parent div).
• Cleaning Class Names: The label text is trimmed of whitespace and converted to lowercase because CSS classes should avoid spaces and uppercase letters (you can remove toLowerCase() if you need the exact case for your use case).
• Dynamic Content Support: The mutation observer watches the entire document for new elements being added. This ensures any labels loaded after the initial page load (like via AJAX or single-page app navigation) get processed too.
• Avoid Duplicate Classes: The script checks if the class already exists before adding it, preventing redundant class entries.
• Site Targeting: Don't forget to update the @match line to target only the website(s) you need this script to run on. For example, if your target site is https://your-site.com/*, change that line to // @match https://your-site.com/*.

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