JavaScript DOM: Assign style from variable EXCEPT for a few properties

Issue

This Content is from Stack Overflow. Question asked by Emanator

I wanted to change the properties of the div EXCEPT for the margin-top and margin-left properties

const alphaClearNo = "font-family: chivo; color: #4466AA; font-size: 36px; font-weight: bold; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; padding: 0; text-align: center; display: flex; justify-content: center; align-items: center;";
const alphaClearYes = "font-family: chivo; color: #6677BB; font-size: 32px; font-weight: normal; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; padding: 0; text-align: center; display: flex; justify-content: center; align-items: center;";

var alphaLetter;
createAlphaLetter = new alphaLetter("A", -360, 80);

function alphaLetter(letter, x, y) {
    let ac = document.createElement("div");
    ac.innerHTML = letter;
    ac.id = letter;
    ac.style = alphaClearNo;
    ac.style['margin-left'] = x + "px";
    ac.style['margin-top'] = y + "px";
    
    document.body.appendChild(ac);
}

var alphaWord = "FLOCCINAUCINIHILIPILIFICATION"

function checkAlphaClear() {
    if (alphaWord.includes("A")) {
        document.getElementById("A").style = alphaClearYes;
    }
} // because margin-top and margin-left weren't defined in alphaClearYes, it just resets to 0 and ends up on the center of the screen

checkAlphaClear();

I don’t want to write each margin-top and margin-left properties after that because that would mean I’ll do that for the rest of the 25 letters.

Is there a more efficient way to do assign the style but with those 2 properties unchanged?



Solution

Check the Answers

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?