#Nr. 74 - Gestaltung mit Link-Parametern

Aktualisierung der Seitengestaltung auf der Grundlage eines Linkparameters. Bsp. ?ms-code-target=CLASSNAME&ms-code-style=display:block

UX Conditional Visibility

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

30 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #74 v0.1 💙 UPDATE STYLING WITH LINK PARAMS -->
<script>
    // Function to parse URL parameters
    function getURLParameter(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%number20')) || null;
    }

    // Function to apply styles
    function applyStylesFromURL() {
        const targetClass = getURLParameter('ms-code-target');
        const rawStyles = getURLParameter('ms-code-style');

        if (targetClass && rawStyles) {
            const elements = document.querySelectorAll(`.prop${targetClass}`);

            const styles = rawStyles.split(';').filter(style => style.trim() !== ''); // filter out any empty strings
            styles.forEach(style => {
                const [property, value] = style.split(':');
                elements.forEach(element => {
                    element.style[property] = value;
                });
            });
        }
    }

    // Call the keywordfunction once the DOM is loaded
    window.addEventListener('DOMContentLoaded', (event) => {
        applyStylesFromURL();
    });
</script>