Ist das Ändern von CSS-Stilen über "document.getElementById(o).style[p]=v" gültig?

Question

Wir hoffen, dass wir unsere benutzerdefinierte Bibliothek, die wir für alle unsere Produkte verwenden, etwas entlasten können.

Eine häufig verwendete Aktion ist die Änderung von Objektstilen.

Normalerweise tun wir dies über:

document.getElementById('object').style.property='value';

Ich habe gerade das Folgende in der Chromes-Konsole getestet, und es hat funktioniert:

function objStyle(o,p,v){
    document.getElementById(o).style[p]=v;
}

objStyle('object','property','value');

Ist dies eine gültige Vorgehensweise?

Gibt es irgendwelche Fallstricke, an die man denken kann, wenn man diese Methode anwendet? Crossbrowser-Kompatibilität?

Answer 1

Ja, das ist vollkommen richtig. Eine Eigenschaft, auf die Sie durch .name kann auch durch ['name'] .

Das funktioniert zum Beispiel für jede Eigenschaft in jedem Objekt:

window['alert']('Hello world.');

document['getElementById']('object')['style']['color'] = '#fff';

Answer 2

Ihr Code ist in Ordnung.

Ich würde mir allerdings überlegen, ob Sie weiter anrufen wollen document.getElementById() (innerhalb der Funktion), wenn Sie mehrere Änderungen an demselben Element vornehmen müssen. Was ich jetzt vorschlage, ist übertrieben, um Ihnen mehr Optionen zu zeigen, aber bedenken Sie, dass Sie die Id an Ihre Funktion übergeben können, oder einen Verweis auf das Element direkt übergeben können, oder eine Funktion haben, die eine Zeichenkette oder einen Elementverweis akzeptiert und ihn anhand des Typs des Parameters herausfindet:

function objStyleById(oId,p,v){
   document.getElementById(oId).style[p]=v;
}

function objStyle(o,p,v) {
   o.style[p] = v;
}

function objStyleAuto(o,p,v) {
   if (typeof o === "string")
      o = document.getElementById("o");
   // else not a string so assume o is element reference
   o.style[p] = v;
}

objStyleById('object','property','value');

var myEl = document.getElementById("someElement");
objStyle(myEl,"prop","val");
objStyle(myEl,"prop2","val");
// some other non-style operation on myEl, e.g.,
myEl.className = "something";
myEl.innerHTML = "something";
objStyle(myEl.parentNode,"prop","value");

objStyleAuto('object','property','value');
objStyleAuto(myEl,'property','value');