Problem beim setzen mehrere Styles

[DiamondDog]

Hallo Leute,
ich würde gerne meine Tabelle dynamisch verändern lassen. Das Problem dabei ist das wenn ich mehrer style Angaben verwende, werden die nachfolgenden für die Spalte einfach ignoriert. Jede Spalte soll ein Hintergrundbild und eine Höhe bekommen, wo bei die Höhe bei mir immer ignoriert wird.

So sieht mein script aus):

  
style_set(test, 20);  
  
function style_set(img_id, top_center_height){  
  document.getElementById('style_top_center').style.backgroundImage = "url(imgout/"+img_id+"/1_2.png)";  
  
  document.getElementById('top_center_height').style.height = top_center_height+"px";  
}  

Schon mal allen Danke fürs helfen.

Mfg Dog

[Der Martin]

Moin,

Das Problem dabei ist das wenn ich mehrer style Angaben verwende, werden die nachfolgenden für die Spalte einfach ignoriert.

function style_set(img_id, top_center_height){
  document.getElementById('style_top_center').style.backgroundImage = "url(imgout/"+img_id+"/1_2.png)";

document.getElementById('top_center_height').style.height = top_center_height+"px";
}

du setzt ja auch die Eigenschaften von zwei verschiedenen Elementen. Ist das so gewollt? Existieren die beiden Elemente mit den angegebenen IDs auch?

Ciao,
 Martin

[DiamondDog]

du setzt ja auch die Eigenschaften von zwei verschiedenen Elementen. Ist das so gewollt? Existieren die beiden Elemente mit den angegebenen IDs auch?

Ohh srry da hatte ich was ausprobiertso ist es richtig:

  
function style_set(img_id, top_center_height){  
  document.getElementById('style_top_center').style.backgroundImage = "url(imgout/"+img_id+"/1_2.png)";  
  
  document.getElementById('style_top_center').style.height = top_center_height+"px";  
}  

[Beat]

Ich vermute, du versuchst mit CSS Elemente zu formatieren, die für diese Art Formatierung nicht empfänglich sind.

Teste zuerst mit CSS, bevor du CSS mit JS erzeugst.

mfg Beat

[DiamondDog]

Teste zuerst mit CSS, bevor du CSS mit JS erzeugst.

Mit CSS geht es ohne Probleme nur halt das einfügen/ändern per JS leider immer noch nicht.

[ChrisB]

Hi,

Mit CSS geht es ohne Probleme nur halt das einfügen/ändern per JS leider immer noch nicht.

Und deine Problembeschreibung ist leider immer noch totaler Murks.

Du bist schon lange genug hier dabei - also sollte es doch eigentlich nicht notwendig sein, dich auf die Tipps für Fragende hinzuweisen, oder?

MfG ChrisB

[Gunnar Bittersmann]

@@DiamondDog:

nuqneH

so ist es richtig:

function style_set(img_id, top_center_height){
  document.getElementById('style_top_center').style.backgroundImage = "url(imgout/"+img_id+"/1_2.png)";

document.getElementById('style_top_center').style.height = top_center_height+"px";
}

  
Von „richtig“ kann da kaum die Rede sein.  
  
Zum einen ist es unsinig, mehrmals das DOM nach demselben Element zu durchsuchen. Einmal reicht:  
  
~~~javascript
function style_set(img_id, top_center_height){  
  var style_top_center = document.getElementById('style_top_center');  
  style_top_center.style.backgroundImage = "url(imgout/"+img_id+"/1_2.png)";  
  
  style_top_center.style.height = top_center_height+"px";  
}

Oder auch gleich document.getElementById('style_top_center').style in einer Variablen speichern.

Eine Abfrage, ob das Element mit der ID 'style_top_center' überhaupt existiert, dürfte sich vor dem Zugriff auf das Elementobjekt auch anbieten.

Zum anderen ist es meist unsinnig, per JavaScript überhaupt Werte von CSS-Eigenschaften zu ändern.

Besser ist es, per JavaScript nur die Zustandsänderung zu markieren, d.h. Klassen zu ändern. Die Styles für die geänderten Klassen stehen – oh welch Wunder – im Stylesheet.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Zum anderen ist es meist unsinnig, per JavaScript überhaupt Werte von CSS-Eigenschaften zu ändern.

hat aber den Vorteil, dass Inline-Styles entstehen, die gleichlautende im Stylesheet überschreiben. Man kann etwas sorgloser programmieren und braucht nur an einer Stelle ändern.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

hat aber den Vorteil, dass Inline-Styles entstehen, die gleichlautende im Stylesheet überschreiben.

Du verwechselst vor und nach.

Man kann etwas sorgloser programmieren und braucht nur an einer Stelle ändern.

Diese Sorglosigkeit rächt sich!

Bei der Plattform, an der ich mitarbeite, gibt es etliche Elemente mit @class="hidden", die anfangs nicht sichtbar sein sollen. Dazu steht im Stylesheet
  .hidden { display: none }

Nun sollen einige davon evtl. später mit JavaScript sichtbar gemacht werden. Das geschieht aber nicht etwa per
  $('#foo').removeClass('hidden');
sondern per
  $('#foo').show();
was die 'display'-Eigenschaft auf "block" setzt; spezifischer als die Regel im Stylesheet.

Lass dir das auf der Zunge zergehen: Elemente haben die Klasse "hidden", sind aber sichtbar.

Nun hatte letztens die glorreiche Idee, die Regel important zu machen:
  .hidden { display: none !important}
Sieht ja eigentlich auch vernünftig aus.

Aber vorbei war’s mit dem Sichtbarmachen per JavaScript! Die spefifischere Regel im Stylesheet ließ die Inline-Style-Regel nicht zur Geltung kommen. (Wurde aber bemerkt, das ging nicht so raus.)

Moral von der Geschichte:
(1) Verwende keine Bezeichner, die nicht das ausdrücken, was sie wirklich tun.

(2) Trenne Präsentation (CSS) und Verhalten (JavaScript) voneinander! Ändere keine CSS-Eigenschaften per JavaScript! jQuery’s show() and hide() considered harmful.

Qapla'

[molily]

Zum anderen ist es meist unsinnig, per JavaScript überhaupt Werte von CSS-Eigenschaften zu ändern.

hat aber den Vorteil, dass Inline-Styles entstehen, die gleichlautende im Stylesheet überschreiben. Man kann etwas sorgloser programmieren und braucht nur an einer Stelle ändern.

Das Argument widerspricht sich selbst. »An einer Stelle« hieße im Stylesheet: Dort regelt die Reihenfolge sowie die Selektor-Spezifität, welche Regeln zur Geltung kommen. Welcher Vorteil liegt darin, zu dieser Ebene noch eine weitere hinzuzufügen, indem ich Inline-Styles mit JavaScript setze? Besser ist es, diesen einen Mechanismus wiederzuverwenden, anstatt ihn außer Kraft zu setzen. Das geht ja z.B. mit Klassen ganz hervorragend.

Mathias

[ChrisB]

Hi,

So sieht mein script aus):

style_set(test, 20);

  
Welchen Inhalt hat die hier verwendete Variable?  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?