✔ JS Element Style Frage

[EuroCent]

Hallo zusammen,

über JS erstelle Ich gerade ein Modul.
Über das Modul wird ein Button generiert den Ich gerne das Styling mitgeben möchte.

Jedoch habe Ich ein Objekt welches entsprechend Werte wie:
- color, background-color etc. hat.

Nun möchte Ich an das Button-Element sowas wie:

let buttonElement = document.createElement('button');
buttonElement.style = settings["button-style"];
buttonElement.innerText = settings["banner-button"]["btn-text"];

let settings = {
    "color": "#ffffff",
    "background-color": "#000000",
    "width": "80px",
    "height": "30px"
};

Allerdings erstellt er zwar das Button-Element jedoch nicht die Style-Attribute

Wie kann Ich das genau machen, oder muss Ich dafür eine Schleife basteln?

 

[Sempervivum]

Verstehe nicht ganz:

• Die settings werden nach ihrer Verwendung definiert?
• Die Elemente button-style und banner-button btn-text finde ich darin nicht wieder?

 

[EuroCent]

Verstehe nicht ganz:

• Die settings werden nach ihrer Verwendung definiert?
• Die Elemente button-style und banner-button btn-text finde ich darin nicht wieder?

„Button-Style“ in diesem Fall ist ein Objekt welches die Style Optionen wie Color, Font-Size etc... enthält...

hier geht es schlecht weg rein nur darum wie man an element.style ein Objekt übergeben kann der die selben Werte hat...

statt ständig Element.style.width oder zu schreiben

 

[Sempervivum]

"Versuch macht kluch" Ich habe das mal getestet und es funktioniert nicht, wenn man style ein Objekt zuweist. Nur die Eigenschaften einzeln für sich funktionieren:

        theStyle = {
            border: '2px solid green',
            height: '10px'
        }
        document.querySelector('.iconClass').style = 'border: 2px solid blue; height: 100px;';
        document.querySelector('.iconClass').style.border = '2px solid red';
        //document.querySelector('.iconClass').style = theStyle; // funktioniert nicht
        for (key in theStyle) {
            document.querySelector('.iconClass').style[key] = theStyle[key];
        }
        console.log(document.querySelector('.iconClass').style);

 

[EuroCent]

"Versuch macht kluch" Ich habe das mal getestet und es funktioniert nicht, wenn man style ein Objekt zuweist. Nur die Eigenschaften einzeln für sich funktionieren:

        theStyle = {
            border: '2px solid green',
            height: '10px'
        }
        document.querySelector('.iconClass').style = 'border: 2px solid blue; height: 100px;';
        document.querySelector('.iconClass').style.border = '2px solid red';
        //document.querySelector('.iconClass').style = theStyle; // funktioniert nicht
        for (key in theStyle) {
            document.querySelector('.iconClass').style[key] = theStyle[key];
        }
        console.log(document.querySelector('.iconClass').style);

Okay... also gibt es da scheinbar keine andere Möglichkeit

Dann muss Ich es wohl doch mit einer Schleife machen ;D
Das wollte Ich mir eigentlich ersparen, aber wenn es nicht funktioniert, wird mir dabei nichts über bleiben.

Mein Objekt sieht so aus:

let settings = {
    "border": "1px solid #000",
    "font-size": "12px",
    "margin": "0 auto",
}

 

[EuroCent]

Hat hier noch jemand eine Idee?

 

[basti1012]

Vieleicht mit Jquery

$('button').css({
   "border": "1px solid #000",
    "font-size": "12px",
    "margin": "0 auto",


)}

ansonsten fällt mir auch nur die Schleife ein

let settings = {
    "border": "1px solid #000",
    "font-size": "12px",
    "margin": "0 auto",
}
for(i in settings){
   button.style[i] = settings[i];
}

Muss es den ein Objekt sein ?
Ohne wäre leichter

let setting =`
    border: 1px solid #000;
    font-size: 12px;
    margin: 0 auto;
`;
document.querySelector('button').setAttribute('style',setting);

 

[EuroCent]

Naja Ich bau ein Kontruktor wo später man optionale Settings mit geben kann, da wäre es als Objekt schöner

jQuery nutze Ich da nicht, da Ich VanillaJS verwenden will!

Aber okay dann kommt eben die Schleife zum Tragen

Vielen Dank

 

[Sempervivum]

Ich denke mal, jQuery wird da intern auch eine Schleife verwenden.

 

[EuroCent]

Ich denke mal, jQuery wird da intern auch eine Schleife verwenden.

Schau Ich mir mal an
Danke Euch