How to put variable javascript as a style css attribute in html?

Question

My code right now is

const replace = (note) => {
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            "<span class='letter' style='display: inline-block'>$&</span>"
        )
    )
};

as you can see in the span, I'm setting style as display inline-block directly. However instead, I want to set the style as some kind of variable like so:

const test = (note, style) => {
    const styles = {display: 'inline-block'};
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            "<span class='letter' style={styles}>$&</span>"
        )
    )
};

but this isn't working because the {styles} inside the span doesn't know that I'm referring to my styles variable. Does anyone know the proper syntax to make this work?

"<span class='letter' style='" + styles + "'>$&</span>". But, styles should be declared like this: const styles = "display:inline-block;" — Scott Marcus
– Scott Marcus, Commented Jun 19, 2020 at 18:49

AttemptedMastery · Accepted Answer · 2020-06-19 18:56:42Z

1

const test = (note, style) => {
    const styles = "display:inline-block;";
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            "<span class='letter' style=" + styles + ">$&</span>"
        )
    )
};

You can do it this way or this way:

const test = (note, style) => {
    const styles = "display:inline-block;";
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            `<span class='letter' style=${styles}>$&</span>`
        )
    )
};

edited Jun 19, 2020 at 18:56

answered Jun 19, 2020 at 18:51

AttemptedMastery

7686 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Marcus Over a year ago

styles needs to be declared as: const styles = "display:inline-block;"

Anish K. · Accepted Answer · 2020-06-19 18:57:16Z

0

You can use template literals:

const test = (note, style) => {
    const styles = "display:inline-block;";
    return DOMPurify.sanitize(
        note.replace(
            /\S/g,
            `<span class='letter' style=${styles}>$&</span>`
        )
    )
};

MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

edited Jun 19, 2020 at 18:57

answered Jun 19, 2020 at 18:50

Anish K.

2,5323 gold badges23 silver badges27 bronze badges

1 Comment

Scott Marcus Over a year ago

styles needs to be declared as: const styles = "display:inline-block;"

Collectives™ on Stack Overflow

How to put variable javascript as a style css attribute in html?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related