Søg
Avatar billede krogstrup Nybegynder
17. juli 2005 - 02:29 Der er 18 kommentarer og
1 løsning

Hvordan angives margin for html objectet gennem javascript

Som overskriften siger:
Hvordan angiver jeg margin for html objektet gennem javascript

altså noget ala:

window.html.style.marginTop = 100

how to do this ?
Avatar billede roenving Novice
17. juli 2005 - 02:31 #1
Hvis du bruger en fuldt kvalificeret doctype, skulle du få fat i det med window.documentElement !-)
Avatar billede krogstrup Nybegynder
17. juli 2005 - 02:35 #2
øh - således...

window.documentElement.style.marginTop = "100px";

?!?

ps: bruger denne:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede roenving Novice
17. juli 2005 - 02:39 #3
Hrm, jeg var nødt til i 4.01 trans at bruge document.body.parentNode ...
Avatar billede krogstrup Nybegynder
17. juli 2005 - 02:43 #4
hmmm - kan man ikke tilgå objektet på anden måde...?

Hvis jeg i min CSS skriver:
html {margin-top:20px;}

ja, så får jeg en margin på 20 pixels i toppen

men scripter jeg:
document.body.parentNode.style.marginTop = "20px";

så sker der ingenting ?
Avatar billede roenving Novice
17. juli 2005 - 02:50 #5
Hvad sker der, hvis du bare sætter den på document.body ?-)
Avatar billede krogstrup Nybegynder
17. juli 2005 - 02:53 #6
det virker fint at sætte margin direkte på body, men problemet er at så får jeg en vertikal scrollbar selv om der ikke er behov for den ?!?

formoder det skyldes at min margin lægges oveni bodys width som er på 100%

kan dette løses på nogen måde, så jeg undgår scrollbaren der ikke er nødvendig ?
Avatar billede krogstrup Nybegynder
17. juli 2005 - 02:55 #7
mener selvfølgelig body´s height, som er 100%
Avatar billede roenving Novice
17. juli 2005 - 02:57 #8
Det ville jo give samme resultat, hvis du gjorde det på dokument-elementet ...

Hvad skal du bruge det til ?-)

-- selv har jeg lavet nogle øvelser med 'blinde' elementer, altså nogle, som bare optager palds men ikke andet, f.eks. sådan en lige efter <body>-tagget:

<div style="line-height:0;font-size:0;height:20px;">&nbsp;</div>
Avatar billede krogstrup Nybegynder
17. juli 2005 - 03:02 #9
Hmmm - det er efterhånden en længere historie...

Vi lavede jo en funktion til at centrere en DIV. Denne fungerer ganske fint og sætter dynamisk top og left for min DIV. Problemet er bare at fordi positionen er angivet via scriptet, kan jeg ikke gennem mit stylesheet få lov til at ændre på positionen af min DIV ved f.eks. udskrift hvor jeg ønsker at sætte top og left til 0px. Hvis jeg fjerner javascript funktionen der dynamisk sætter top og left, kan jeg godt sætte positionen for min DIV til noget andet ved udskrift i mit stylesheet, men IKKE hvis javascript funktionen er aktiveret.

Derfor tænkte jeg at det måske ville være smartere at lade min DIV med selve designet være relativ positioneret, og i stedet bruge javascript funktionen til at sætte margin for BODY elementet for på den måde at centrere mit design.

Nogen gode idéer ?
Avatar billede krogstrup Nybegynder
17. juli 2005 - 03:04 #10
Som tidligere nævnt virker det faktisk ganske fint at sætte margin gennem document.body.style osv. - MEN problemet er bare at så får jeg i stedet en vertikal scrollbar selv om mit design ikke kræver det...
Avatar billede krogstrup Nybegynder
17. juli 2005 - 03:04 #11
Det med scrollbaren sker både i IE og FF
Avatar billede roenving Novice
17. juli 2005 - 03:05 #12
@media print{
  #ditElement{top:0;left:0;}
}
Avatar billede krogstrup Nybegynder
17. juli 2005 - 03:06 #13
I know - men det virker bare ikke

Browseren ignorerer det når top og left er sat via script funktionen ?!?
Avatar billede roenving Novice
17. juli 2005 - 03:11 #14
Dvs. at du ahr en funktion, som du kalder, hvis der skal udskrives ?-)

-- jeg har ikke fod på, om der evt. skulle kunne findes nogle events, man kan fange 'sendt til printer' med (men jeg tvivler, når jeg nu aldrig er stødt ind i den !-)

-- men så kunne du jo samle værdien op før udprintningen og sætte den tilbage bagefter, f.eks. kunne man forestille sig det gjort efter et interval ...
Avatar billede krogstrup Nybegynder
17. juli 2005 - 03:14 #15
der findes en beforeprint og afterprint, men de virker kun i IE

Jeg kalder ikke nogen specifik funktion, når der udskrives. Jeg ønsker at sitet bliver printvenlig udskrevet uanset hvad - også hvis brugeren klikker direkte på PRINT knappen i browseren.

Derfor er løsningen nødt til at fungere således at min DIV sættes til top:0px og left:0px ved udskrift

jeg forstår bare ikke hvorfor det ikke virker, blot fordi jeg har sat disse koordinater igennem et javascript ?!?
Avatar billede roenving Novice
17. juli 2005 - 12:24 #16
Ah, ja onbeforeprint og onafterprint, men bemærkningen var også rettet mod en tilgang, der som grundlag var virkende bare lidt crossbrowser-agtigt ...

-- og generelt har style-properties sat via javascript større vægt end dem som findes i et stylesheet, f.eks. er der overensstemmelse mellem den måde man kan aflæse inline style-properties og properties sat via javascript ...

(se f.eks. http://www.w3.org/TR/REC-CSS2/cascade.html#specificity som jeg lige måtte finde i går !-)

-- men jeg har i andre sammenhænge med succes benyttet mig af at 'nulstille' en styleproperty via javascript, hvorefter den tidligere værdi bliver synlig og virksom igen !o]

-- måske kan der være ideer i det ...
Avatar billede krogstrup Nybegynder
17. juli 2005 - 16:14 #17
nå - fik løst mit problem på en anden måde.

Jeg har nu smidt en DIV ovenover den DIV der indeholder selve designet. Den øverste DIV fungerer således som en "spacer" hvor højden sættes dynamisk at et javascript, således at design DIV´en altid er centreret vertikalt.

Fungerer faktisk rigtig godt...

Tak for sparring & gode input - smider du et svar ?
Avatar billede roenving Novice
17. juli 2005 - 16:16 #18
Oki '-)
Avatar billede roenving Novice
17. juli 2005 - 17:01 #19
-- og tak for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
White papers
Flere white papers »