[JS] Hulp met lezen @import stylesheets - Softwareontwikkeling

dinsdag 13 juni 2006 10:05

Acties:

Topicstarter

hi all,

Ik ben bezig een script te schrijven dat de lettergrootte van de pagina veranderd. Dit doe ik door met javascript de regels van een css stylesheet uit te lezen en hierin de waarde van de lettergroote (fontSize) aan te passen.

Op de pagina wordt een css stylesheet ingeladen in dit stylesheet staan 4 @import regels die weer voor verschillende secties de verschillende css-stylesheets inladen.

In FF kan ik de regels van de stylesheets gewoon ophalen op de volgende manier:

var test = document.styleSheets[0].cssRules[0].styleSheet.cssRules;

dit geeft een array terug met alle regels van de eerste @import stylesheet.

In IE krijg ik met: var test = document.styleSheets[0].rules een lege array terug. Ofwel hij ziet de @import regels niet. Hoe kan ik daarbij komen? als ik document.styleSheets[0].cssText ophaal krijg ik keurig de @import regels te zien als tekst.

Iemand hier ervaring mee?

Groeten Rudi

dinsdag 13 juni 2006 10:10

Acties:

Verwijderd

misschien een andere aanpak. Kan je niet gewoon rechtstreeks de font-size van het body element aanpassen.

document.getElementsByTagName("BODY")[0].style.fontsize = '12px'

ik weet niet of dit werkt, maar het idee moet denk ik duidelijk zijn

[ Voor 6% gewijzigd door Verwijderd op 13-06-2006 10:11 ]

dinsdag 13 juni 2006 10:17

Acties:

TeeDee

CQB 241

Is het voor IE niet

code:

1	styleSheets[0].rules

ipv cssRules?
Hier misschien nog nuttige informatie.

[ Voor 41% gewijzigd door TeeDee op 13-06-2006 10:17 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 13 juni 2006 10:24

Acties:

DeRRudi

Topicstarter

TeeDee schreef op dinsdag 13 juni 2006 @ 10:17:
Is het voor IE niet
code:
1
styleSheets[0].rules
ipv cssRules?
Hier misschien nog nuttige informatie.

Idd is het rules. Type foutje van mij. Als ik die gebruik geeft hij een lege array terug. Dus dat gaat niet werken. Eigenlijk wil ik geen opmaak in de broncode zelf hebben (dus in de body tag) Daarom wil ik het in de css laten aanpassen. Maar misschien dat dit niet mogelijk is.

dinsdag 13 juni 2006 10:49

Acties:

crisp

Devver

Pixelated

Als je op je body-element in CSS een abolute fontsize opgeeft en in de rest van je stylesheet relatief dan hoef je enkel je basis fontsize (van je body dus) aan te passen en schaalt de rest mee.
Het uitlezen en aanpassen van stylerules is erg lastig crossbrowser goed te krijgen, veel browsers (Opera bijvoorbeeld) bieden daar ook geen support voor.

Intentionally left blank

dinsdag 13 juni 2006 13:03

Acties:

DeRRudi

Topicstarter

Heb het al opgelost.

Er zit voor ie een optie .import bij. Dan kan ik alles gewoon ophalen. Misschien werkt het niet super met alle browsers, maar denk dat de meest gebruikte browsers er gewoon goed mee omgaan.

dinsdag 13 juni 2006 17:04

Acties:

Verwijderd

denk je dat of heb je dat ook getest?

woensdag 14 juni 2006 02:07

Acties:

Verwijderd

Waarom iets maken wat reeds in een browser ingebouwd zit?

Ik werk altijd met em als eenheid en daar heeft geen enkele browser (naar mijn weten) problemen mee om de size aan te passen.

Edit: als het om een fullscreen toepassing gaat dan zeg ik nix meer :x

[ Voor 17% gewijzigd door Verwijderd op 14-06-2006 02:07 ]

woensdag 14 juni 2006 09:26

Acties:

Vinzzz243

crisp schreef op dinsdag 13 juni 2006 @ 10:49:
Als je op je body-element in CSS een abolute fontsize opgeeft en in de rest van je stylesheet relatief dan hoef je enkel je basis fontsize (van je body dus) aan te passen en schaalt de rest mee.

Kan het zijn dat IE anders met ctrl+muiswiel omgaat?

Als ik namelijk dit doe:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="nl">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body { font-size: 40px; }
* { font-size: 200%; }
</style>
</head>

<body>
<div id="container">Dit is een test</div>
</body>
</html>

Kan ik in IE niet ctrl + muiswiel gebruiken

[ Voor 43% gewijzigd door Vinzzz243 op 14-06-2006 09:34 ]

woensdag 14 juni 2006 10:00

Acties:

crisp

Devver

Pixelated

Dat klopt, IE resized geen pixel-sized fonts

Intentionally left blank

woensdag 14 juni 2006 10:15

Acties:

Vinzzz243

crisp schreef op woensdag 14 juni 2006 @ 10:00:
Dat klopt, IE resized geen pixel-sized fonts

dus dan een conditional comment waarbij ik body op bv 75% zet (trial and error voor het betreffende font) ?

woensdag 14 juni 2006 15:03

Acties:

Verwijderd

Dus iets als hier: http://wantedmusic.be/

woensdag 14 juni 2006 15:08

Acties:

frickY

crisp schreef op dinsdag 13 juni 2006 @ 10:49:
Als je op je body-element in CSS een abolute fontsize opgeeft en in de rest van je stylesheet relatief dan hoef je enkel je basis fontsize (van je body dus) aan te passen en schaalt de rest mee.
Het uitlezen en aanpassen van stylerules is erg lastig crossbrowser goed te krijgen, veel browsers (Opera bijvoorbeeld) bieden daar ook geen support voor.

Als je ook de body percentueel defineerd werken de font opties van de browser ook nog gewoon

woensdag 14 juni 2006 16:54

Acties:

Sabbi

je denkt aan mij.

Ben toevallig met iets soortgelijks bezig,
kan je eigenlijk via document.getElementsByTagName("BODY") ook de fontsize uitlezen?
Als ik dit doe

code:

var obj=document.getElementsByTagName("BODY");
  for(var i=0;i<obj.length;i++) {
    alert (obj[i].style.fontSize);
  }

Krijg ik niks terug, ook als ik style.font of style.fontStyle uitlees...
de code zit overigens in een opera-userjs die ik op GoT toepas, waar de css ook diep in de import zit.
GoT rendert zichzelf compleet absoluut, dus alleen de body aanpassen werkt niet, nu kan ik wel via getElementsByTagName alle elementen van de pagina een fontsize toewijzen, maar liefst wil ik hem uitlezen en dan een aantal pixels ophogen...

[ Voor 4% gewijzigd door Sabbi op 14-06-2006 16:56 ]