JS Element Style Frage


EuroCent

Klappstuhl 2.0
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:
Javascript:
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

Erfahrenes Mitglied
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

Klappstuhl 2.0
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

Erfahrenes Mitglied
"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:
Code:
        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

Klappstuhl 2.0
"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:
Code:
        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:
Javascript:
let settings = {
    "border": "1px solid #000",
    "font-size": "12px",
    "margin": "0 auto",
}
 

basti1012

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


)}
ansonsten fällt mir auch nur die Schleife ein
Code:
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
Code:
let setting =`
    border: 1px solid #000;
    font-size: 12px;
    margin: 0 auto;
`;
document.querySelector('button').setAttribute('style',setting);
 

EuroCent

Klappstuhl 2.0
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 :D

Vielen Dank :)