[js]createElement en toevoegen van style

[Hangloozz]

probleem:
na het creëren van een element op de pagina wil ik deze voorzien van de nodige style-kenmerken.
Welke methode ik ook probeer; niets is zichtbaar/werkt.

getracht:
diverse methodes binnen javascript voor het toewijzen van styles:
- divnaam.setAttribute("borderColor","red");
- blaat.style.borderColor = 'red';

gevraagd:
wat doe ik een fout of met welke syntax gaat dit wel lukken?

code:
ik heb ff een basale opzet online gezet: linkje

[crisp]

Je bent het attribuut voor borderStyle vergeten:

JavaScript:

blaat.style.borderWidth = '1px';
blaat.style.borderColor = 'red';
blaat.style.borderStyle = 'solid';

Dit werkt wel in Mozilla, echter niet in IE (5.5 hier):

JavaScript:

blaat.setAttribute('style','border: 1px solid #000000');

[Chevalric]

Wat misschien gemakkelijker is, is om het element aan een class of id in je stylesheet te koppelen:

code:

objElement.className = "koeleklas";
objElement.id = "koeleklas";

Werkt een stuk handiger dan elke property apart gaan toewijzen

[disjfa]

JavaScript:

blaat.style.border = "1px solid black";

nog wat makkelijker gemaakt

[Hangloozz]

sh*t, allerlei dingen geprobeerd maar ff vergeten de borderstyle te zetten

goed, dat werkt inderdaad wel ja, maar met setAttribute niet, terwijl dat toch wel gepromoot wordt als officiele DOM-wijze.
Weet je daar meer over?

Als ik deze kluit code toevoeg dan werkt het niet:

code:

blaat.setAttribute("borderWidth","1px");
blaat.setAttribute("borderColor","red");
blaat.setAttribute("borderStyle","solid");
blaat.setAttribute("backgroundColor","blue");

ook het opsommen van properties gaat hopeloos mis.

code:

blaat.setAttribute("style","width:600px;" +
                    "top:340px" +
                    "height:15px;" + 
                    "border-color: #000000;" +
                    "border-width: 1px;" + 
                    "border-style: solid");

Het koppelen aan een class lijkt me handig alleen is de genoemde syntax niet volgens de DOM specificatie voor het toevoegen van style aan een gecreërd element..
En laat de site nou net gebouwd worden voor DOM-only browsers

[crisp]

Hangloozz schreef op 11 februari 2003 @ 10:59:
[...]
En laat de site nou net gebouwd worden voor DOM-only browsers

Dan drop je toch gewoon IE-support

[Hangloozz]

crisp schreef op 11 February 2003 @ 11:01:
[...]

Dan drop je toch gewoon IE-support

ehm, IE versie 5.5 en hoger ondersteunen toch wel zo'n beetje alle DOM kenmerken

maar ik denk niet dat de klant daarmee accoord gaat

(btw: het creeren van een image op deze wijze gaat hopeloos fout in Mozilla lekker DOM)

Voor de time being doe ik het even op Chevalric2's wijze.

[ Voor 9% gewijzigd door Hangloozz op 11-02-2003 11:07 ]

[Verwijderd]

crisp schreef op 11 februari 2003 @ 11:01:
Dan drop je toch gewoon IE-support

Hmm waar heb ik dat vaker gezien

Goed kleine variatie op het toekennen van een class, wat trouwens niet werkt in IE 6

JavaScript:

<style type="text/css">
#mydiv {
    width: 200px;
    height: 200px;
    border: thin red solid;
    position: absolute;
    top: 15px;
    left: 15px;
}
</style>
<script type="text/javascript">
function divver(){
    var oDiv = document.createElement('div');
    docbody = document.getElementsByTagName('body').item(0);
    oDiv.setAttribute('id','mydiv');
    //oDiv.setAttribute('class','mydiv'); werkt dus niet in IE 6
    docbody.appendChild(oDiv);
}
onload=divver;
</script>

Dit werkt dus zowel in IE 6 als in Mozilla.

[crisp]

Volgens de MSDN reference zou dit moeten werken:

JavaScript:

oDiv.setAttribute('className','mydiv');

en:

JavaScript:

blaat.style.setAttribute('cssText','border: 1px solid red');

so much for the standards and back to browsersniffing....

[ Voor 36% gewijzigd door crisp op 11-02-2003 11:48 ]

[Hangloozz]

Verwijderd schreef op 11 February 2003 @ 11:09:
[...]

Hmm waar heb ik dat vaker gezien

Goed kleine variatie op het toekennen van een class, wat trouwens niet werkt in IE 6


Dit werkt dus zowel in IE 6 als in Mozilla.

Klopt; kwamen we pas achter met de bouw van een hierarchisch menu in JS; het toekennen van de style dmv een setAttribute en class kregen we niet aan de gang.

Je code komt aardig overeen met wat ik al had; wat inmiddels ook werkt.


Enne crsip: het raar maar waar: dat werkt dus niet dat was waar ik ook op vast liep.

[Verwijderd]

Ik dacht eerst dat het misschien aan de doctype lag (xhtml 1.0 strict), maar ook een 4.01 transitional werkt niet, idd raar maar waar. Gelukkig kan je er vrij makkelijk omheen coden.

[crisp]

Hangloozz schreef op 11 February 2003 @ 11:50:
[...]
Enne crsip: het raar maar waar: dat werkt dus niet dat was waar ik ook op vast liep.

werkt hier wel @IE5.5 (tsja, natuurlijk niet in Mozilla want het is niet volgens de DOM standaard).
@1; let wel dat ik een class specificieer, dus de volgende CSS gebruik:

HTML:

<style type="text/css">
.mydiv {
  border: 1px solid red;
}
</style>

[Hangloozz]

ja je hebt gelijk; het werkt wel (IE6)
door het gen**k met styles, versies, setAtt enz. ben ik af en toe ff de draad kwijt..
tijd om ff de overbodige code d'r uit te schudden

lui, hartelijk dank weer voor het meedenken
Ik ga es een mooie combi maken van de opties.

[Verwijderd]

nog een kleine toevoeging.

JavaScript:

oDiv.setAttribute('class','mydiv'); // voor Moz
oDiv.setAttribute('className','mydiv'); // voor IE

Krijg in beide browsers geen errors, misschien ook nog een optie? Hoef je iig geen browser detectie te gebruiken.