Avatar billede mik789 Nybegynder
02. marts 2003 - 14:30 Der er 46 kommentarer og
1 løsning

javascript styles

Iflg. Netscapes Javascript Reference på

http://developer.netscape.com/docs/manuals/js/client/jsref -> "Objects, Methods, and Properties" -> "Style"

skulle man kunne skrive style værdier v.hj.af javascript, enten i <style></style> sådan:

<style type="text/javascript">
tags.body.margin='0px'
tags.body.fontFamily='Verdana, Arial, sans-serif'
tags.body.fontSize='10pt'
ids.mindiv.position='absolute'
ids.mindiv.top='10px'
ids.mindiv.left='30px'
</style>

eller i <script></script> hvor man bare skal have document. foran alle erklæringerne.

Jeg har prøvet det, men det fungerer ikke. Browseren opfatter det ikke som styles. Har nogle af jer andre erfaringer med dette? Det er jo meget smart hvis man ind imellem har brug for at skrive styles ud dynamisk i browseren.

//mik
Avatar billede mortrr Praktikant
02. marts 2003 - 14:39 #1
Så vidt jeg husker, så virkede det nu helt fint.
Men det er altså længe siden jeg har rodet med NS 4.x

- Morten
Avatar billede pelkjaer Nybegynder
02. marts 2003 - 14:39 #2
document.getElementsByTagName('SPAN').style.fontWeight = "bold";

eller med getElementById('mindiv').style osv.
Avatar billede mortrr Praktikant
02. marts 2003 - 14:43 #3
Lige for at præcisere:
De sider du henviser til er netscape 4.x dokumentation.

- Morten
Avatar billede mik789 Nybegynder
02. marts 2003 - 14:43 #4
pelkjaer> ja den er jeg med på, men Referencens ikke-DOM version (altså uden getElement....) er jo enklere (og hurtigere at taste), så det ville jo være smart, men som sagt kan jeg ikke få det til at virke her.
Avatar billede mik789 Nybegynder
02. marts 2003 - 14:44 #5
mortrr>OKOK.... det forklarer det måske (jeg har testet i NS6 og IE6). Har du linket til en Netscape 6 Javascript Refernce?
Avatar billede pelkjaer Nybegynder
02. marts 2003 - 14:45 #6
Hehe, jeg er lidt vild med dom kode :) ns4 interesserer mig ikke rigtigt længere.
Avatar billede mik789 Nybegynder
02. marts 2003 - 14:46 #7
næ, jeg koder heller ikke til NS4, vidste bare ikke at det kun er for den det dur
Avatar billede mortrr Praktikant
02. marts 2003 - 14:56 #8
hvad med:
http://www.mozilla.org/docs/dom/domref/
Den indeholder Document Object Model for Gecko

og:
http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/
indeholder javascript referencen (hvor du altså IKKE finder noget om styles - det er i DOM'en)

- Morten
Avatar billede mik789 Nybegynder
02. marts 2003 - 15:02 #9
pelkjaer> Hvordan vil du skrive det i et script? Hvis jeg f.eks. skriver:

<script type="text/javascript"><!--
if(document.getElementById('mindiv')&&document.getElementById('dindiv')){
  if(document.all){
  document.getElementById('mindiv').style.position='absolute';
  document.getElementById('dindiv').style.position='absolute';
  }else{
  document.getElementById('mindiv').style.position='fixed';
  document.getElementById('divdiv').style.position='fixed';
  }
}
//--></script>

virker det ikke.

heller ikke i den korte version:
document.getElementById('mindiv').style.position=(document.all)?'absolute':'fixed';

hvordan skal det se ud og hvorfor?
Avatar billede pelkjaer Nybegynder
02. marts 2003 - 15:12 #10
var ie4 = (document.all && !document.getElementById);
var dom = (!document.all && document.getElementById);


if(ie4) {
  document.all[id].style.position = "absolute";
}
else if(dom){
  document.getElementById(id).style.position = "fixed";
}
Avatar billede mortrr Praktikant
02. marts 2003 - 15:20 #11
pelkjaer > Hvad så med IE5 og 6? Det får da hverken ie4 eller dom sat.

- Morten
Avatar billede pelkjaer Nybegynder
02. marts 2003 - 15:23 #12
mortrr>>Det må du uddybe, det forstår jeg ikke.
Avatar billede mortrr Praktikant
02. marts 2003 - 15:30 #13
ie5 og 6 har både document.all og document.getElementbyId, så med
var ie4 = (document.all && !document.getElementById);
var dom = (!document.all && document.getElementById);
bliver position ikke sat i IE > 4, da hverken ie4 eller dom bliver true.

Eller?

- Morten
Avatar billede pelkjaer Nybegynder
02. marts 2003 - 15:37 #14
Mener jeg ikke du har ret i.
Men vi kan da også sige

var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

if(ie4) {
  document.all[id].style.position = "absolute";
}
else if(ie5||ns6){
  document.getElementById(id).style.position = "fixed";
}
Avatar billede olebole Juniormester
02. marts 2003 - 15:44 #15
<ole>

Forklaringen på udgangspunktet for diskusionen er, at NS4 ikke havde CSS implementeret, men benyttede JSSS (JavaScript-StyleSheets).

Til det seneste:

var ie4 = (document.all)? true : false;
var dom = (!document.all && document.getElementById)? true : false;
if(ie4) {
  document.all[id].style.position = "absolute";
}
else if(dom){
  document.getElementById(id).style.position = "fixed";
}

Så burde det funke  :)
/mvh
</bole>
Avatar billede mik789 Nybegynder
02. marts 2003 - 15:49 #16
hvorfor funker det her så ikke:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style med javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css"><!--
#mindiv {
    position: absolute;
    top: 60px;
    left: 40px;
    width: 300px;
    height: 200px;
    border: 1px solid #666666;
}
--></style>

<script type="text/javascript"><!--
if(document.getElementById('mindiv')){
document.getElementById('mindiv').style.backgroundColor="red";
}
//--></script>

</head>

<body>

<p>Her er et lag. I scriptet er baggrundsfarven sat til rød. Men det virker ikke :-(</p>

<div id="mindiv">&nbsp;</div>

</body>
</html>
Avatar billede olebole Juniormester
02. marts 2003 - 15:51 #17
Det er fordi, du kalder et JavaScript, der skal sætte styles på et element, browseren endnu ikke aner eksisterer ... det er slet ikke skrevet ud endnu  ;o)

Pak det ind i en funktion og fyr denne af på onload
Avatar billede olebole Juniormester
02. marts 2003 - 15:52 #18
Du får vel også en JS-fejl, når du skriver, som du lige gjorde
Avatar billede olebole Juniormester
02. marts 2003 - 15:54 #19
Vrøvl ... du får selvfølgelig ikke en fejl p.gr.a. din if-betingelse - men uden den ville du få en  ;o)
Avatar billede mik789 Nybegynder
02. marts 2003 - 15:55 #20
ole> nej jeg for nemlig ingen fejl - ikke engang i Netscapes Javascript console.

Men nu pakkede jeg det ind i funktionen makeMeRed() - og det funker, så du havde ret.
Avatar billede mik789 Nybegynder
02. marts 2003 - 15:55 #21
ole> OK.... (til det sidste)
Avatar billede mik789 Nybegynder
02. marts 2003 - 15:56 #22
ole> læg et svar og tak for hjælpen. det er hele tiden det med at tænke på hvad et script kan vide og hvad det ikke kan vide. har li'som været ude for det før ;-)
Avatar billede olebole Juniormester
02. marts 2003 - 15:59 #23
Det har vi zq alle sammen ... og vi falder alle i fra tid til anden  ;o)
Det her vil også virke, uden fejl:

<div id="mindiv">&nbsp;</div>
<script type="text/javascript">
  document.getElementById('mindiv').style.backgroundColor="red";
</script>

/mvh
Avatar billede olebole Juniormester
02. marts 2003 - 16:02 #24
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:10 #25
ole> fint, nu mangler jeg bare at gøre det mere generelt. prøver med:

<script type="text/javascript"><!--
function moreStyle(id,property,value) {
document.getElementById(id).style.property=value;
}
//--></script>

<body onload="moreStyle('mindiv',backgroundColor,'red');">

men den går ikke. vil ikke kendes ved backgroundColor. hvad så?
Avatar billede olebole Juniormester
02. marts 2003 - 16:18 #26
<body onload="moreStyle('mindiv','backgroundColor','red');">
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:21 #27
ole> desværre, det har jeg prøvet. jeg får ingen fejl, men det virker ikke. backgroundColor er jo heller ikke en streng (ligesom 'red' og 'mindiv'), men en egenskab ved style
Avatar billede olebole Juniormester
02. marts 2003 - 16:23 #28
Undskyld ... jeg vrøvler  :)
Det kan du ikke uden at bruge eval() ... det ville jeg undgå, hvis jeg var dig.
Nu ved jeg ikke, hvad du vil bruge det til - så det er svært at give et godt bud på en løsning
Avatar billede mortrr Praktikant
02. marts 2003 - 16:24 #29
<script type="text/javascript"><!--
function moreStyle(id,property,value) {
  document.getElementById(id).style.setAttribute(property,value);
}
//--></script>
<body onload="moreStyle('mindiv','background-color','red');">

?
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:24 #30
jeg vil bruge det til at tilføje dynamiske (f.eks. browserafhængige)styleværdier til de styles der er sat i forvejen i stylesheetet
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:26 #31
ole> f.eks. kan man lægge en div oven på en iframe i NS hvis div'en har position: fixed; i IE kan den godt være absolute. Der ville det være smart at undlade position i styelsheetet, men i stedet sætte den ind dynamisk
Avatar billede olebole Juniormester
02. marts 2003 - 16:27 #32
Eller, da der jo er tale om et objekt, kan man skrive:

<script type="text/javascript">
<!--
function moreStyle(id,property,value) {
document.getElementById(id).style[property]=value;
}
//-->
</script>

<body onload="moreStyle('mindiv','backgroundColor','red');">

Hvilket er betydelig hurtigere end setAttribute()
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:28 #33
ole> YES! så er den der. tak igen
Avatar billede olebole Juniormester
02. marts 2003 - 16:29 #34
Hvorfor ikke bruge forskellige stylesheets ... det er langt bedre  :)

Du kan ikke lægge et div over en iframe, hvis det skal virke X-browser
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:29 #35
ole> fortæl mig lige: hvorfor firkantede paranteser?
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:31 #36
ole> det ved jeg; i praksis kører jeg med et stylesheet hvor browserafhængige værdier vælges ved hj.af php. Men nu sad jeg lige og puslede med et forsøg hvor jeg prøvede i js i stedet.

Det skal ikke nødvendigvis virke fuldstændigt X-browser. IE og NS er med. Jeg har vist nok problemer med IE til Mac og må måske finde en anden løsning der
Avatar billede olebole Juniormester
02. marts 2003 - 16:33 #37
Fordi, du sætter en property på elementets style-objekt.
En property på et JS-object kan tilgåes i dot-notation (ELEMENT.style.backgroundColor) - eller som et element i et associativt array (ELEMENT.style.["backgroundColor"])
Avatar billede olebole Juniormester
02. marts 2003 - 16:34 #38
Ups ... der kom et punktum for meget med: ELEMENT.style["backgroundColor"])
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:34 #39
ok, så fik jeg det på det rene ;-)
Avatar billede olebole Juniormester
02. marts 2003 - 16:37 #40
Et lille eksempel:

var mitObjekt = new Object();
mitObjekt.navn = "Ole";

alert(mitObjekt.navn);
alert(mitObjekt["navn"]);
Avatar billede olebole Juniormester
02. marts 2003 - 16:39 #41
Hvis du kalder en property 1000 gange og tager tid på det, vil du se, at dot-notationen er lidt hurtigere end array-notationen ... det kan du dog nok se stort på her  ;o)
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:39 #42
ja, jeg er med. i princippet indgår alle properties ved objekter i arrays, ikke?
Avatar billede olebole Juniormester
02. marts 2003 - 16:43 #43
Lad mig sige det på den måde, at de opførerer sig fuldstændig som sådan ... det er det vigtige i daglig brug  ;o)
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:43 #44
mht lag over iframes, så har jeg set et sted en kode til en dropdown menu ned over rammen under (altå svarende til mit problem), men jeg husker ikke hvad princippet var, bare at koden var ENORM lang
Avatar billede olebole Juniormester
02. marts 2003 - 16:48 #45
Du kan kun i IE ... ikke i NS/Mozilla
Avatar billede mik789 Nybegynder
02. marts 2003 - 16:49 #46
trist... men jo konsekvent nok
Avatar billede mik789 Nybegynder
02. marts 2003 - 18:01 #47
og lige en demo af det hele:

www.dahr.dk/Web/style_med_js.html
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester