✔ [JS] Style-Angaben zusammenfassen

[ricounltd]

Hallo,
kann ich folgenden Code optimieren?

  canvas.style.border = '0';
  canvas.style.width = '100%';
  canvas.style.height = '100%';
  canvas.style.top = '0';
  canvas.style.left = '0';
  canvas.style.bottom = '0';
  canvas.style.right = '0';

Also kann man diese Style-Angaben irgendwie zusammenfassen? Danke schonmal im voraus für eine hilfreiche Antwort.

 

[javaDeveloper2011]

Hi,

ich bin mir ziemlich sicher das das nicht kürzer geht.
Außerdem kommt es doch im Web eher darauf an alles so zu formulieren das es jeder Browser versteht und nicht möglicht kurze, effiziente Codes zu schreiben!?
Die Ladezeit und den Aufwand fürs Ausführen sind bei den paar Zeilen doch wirklich zu vernachlässigen, oder was ist der Grund?

 

[Quaese]

Hi,

folgendes Codefragment ist zwar nicht kürzer, läßt sich jedoch meiner Meinung nach bequemer pflegen.

var canvas = document.getElementById("canvas"),
    styleObj = {
      border: '1px solid #000',
      borderRight: '3px solid #f00',
      width: '100%',
      height: '100%',
      top: '0',
      left: '0',
      bottom: '0',
      right: '0'
    };

for(var key in styleObj)
  canvas.style[key] = styleObj[key];

Die CSS-Eigenschaften müssen in camelcase-Schreibweise angegeben werden (siehe borderRight).

[EDIT]
Und wenn die "normale" CSS-Schreibweise ebenfalls unterstützt werden soll, kannst du das wie nachstehend realisieren:

var canvas = document.getElementById("canvas"),
    styleObj = {
      border: '1px solid #000',
      borderRight: '3px solid #f00',
      'border-left-width': '25px',
      width: '100%',
      height: '100%',
      top: '0',
      left: '0',
      bottom: '0',
      right: '0'
    };

for(var key in styleObj)
  canvas.style[key.replace(/\-(\w)/g, function(){
    return arguments[1].toUpperCase();
  })] = styleObj[key];

CSS-Eigenschaften mit Bindestrichen müssen allerdings in Anführungszeichen gesetzt werden.
[/EDIT]

Ciao
Quaese

 

[CPoly]

Mir fällt auf die schnelle nichts kürzeres ein. Aber es ist lesbar und DRY (http://en.wikipedia.org/wiki/Don't_repeat_yourself).

var s = canvas.style;
s.border = s.top = s.left = s.bottom = s.right = 0;
s.width = s.height = '100%';

Spoiler

Auf keine Fall so, das ist böse!

with(canvas.style) {
  border = top = left = bottom = right = 0;
  width = height = '100%';
}

Ich bereute schon, dass ich das with-statement da mit rein ziehe.

 

[wollmaus]

style ist nicht nur ein JS-Objekt, es ist auch ein HTML-Attribut, und als solches kann man es auch setzen:

canvas.setAttribute('style','border:0;width:100%;height:100%;top:0;left:0;bottom:0;right:0;');

(funktioniert ab IE8 und in allen sonst handelsüblichen Browsern)

Allerdings:
Dies überschreibt alle inline notierten oder per JS zugewiesenen styles des Elementes, also alles was über das JS-style-Objekt zugreifbar ist. Styles von Stylesheets bleiben unangetastet(es sei denn ein dort notiertes Format wird in setAttribute neu definiert).

Falls du dich mal für ein Framework entscheiden solltest, jQuery's css-Methode nimmt auch ein Objekt(wie styleObj in Quaese's Antwort) als Argument, das hätte dann nicht die Auswirkungen wie oberhalb bei "Allerdings" vermerkt sondern würde sich verhalten wie dein gegenwärtiges Skript.

 

[javaDeveloper2011]

Also von wollmaus`Methode würde ich echt abraten, ich verweise mal einfach auf meinen ersten Post.