nicht angemeldet
document.styleSheets im IE7
StruppiIch habe auf einer Seite einen Link, mit dem ich die Schriftgröße dokumentweit erhöhen bzw. verringern will. Funktioniert scheinbar in allen vernünftigen Browsern, selbstverständlich nicht im IE7. Der erhöht die Schriftgröße nur im freien Text, nicht aber in der Tabelle, die den eigentlichen Inhalt der Seite enthält.
Hier der CSS-Stylesheet, der verändert werden soll:
<style type="text/css">
body, td {font-family: Verdana; font-size: 10px}
</style>
Hier die dazugehörigen Javascript-Funktionen:
var fontSizeDef = 10;
var fontSize = 10;
var fontSizeInterval = 0.5;
function font_dec() {
fontSize = fontSize * 0.9;
set_font_size(fontSize);
}
function font_inc() {
fontSize = fontSize * 1.1;
set_font_size(fontSize);
}
function font_def() {
fontSize = fontSizeDef;
set_font_size(fontSize);
}
function set_font_size(foo) {
if (document.styleSheets[0].cssRules) {
document.styleSheets[0].cssRules[0].style.fontSize = foo + "px";
} else {
document.styleSheets[0].rules[0].style.fontSize = fontSize + "px";
}
}
Und hier der entsprechende Bereich HTML, mit dem es aufgerufen wird:
<a href="javascript:font_dec()">-</a> <a href="javascript:font_def()">Schriftgröße</a> <a href="javascript:font_inc()">+</a>
Alles im Zusammenspiel betrachtet werden kann es unter:
http://www.pp-intranet.de/trunk/
-
Hallo,
ich hatte mal ein ähnliches Problem, ich wollte einen <div> per link verschieben. Im IE funktioniert alles ein wenig anders, also wurde ich über "ComputedStyle" belehrt.
Wenn Du das ganze Umbaust, und statt ...style.left ...style.fontSize einbaust, sollte es auch im IE klappen.Hier ist die komplette Seite mal als Quellcode:
Und hier kannst Du mal probeweise im IE nachschauen. Der Server ist allerdings nicht immer online.mfg
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>creating a default layout</title> <script type="text/javascript" > <!-- function movehz(who, leftright) { /* document.getElementById(who).style.left = leftright + parseInt(document.getElememtById(who).style.left) + "px"; */ foo = document.getElementById(who); if (document.body.currentStyle) {fooStyle = foo.currentStyle;} else if (window.getComputedStyle) {fooStyle = window.getComputedStyle(foo, null);} document.getElementById(who).style.left = leftright + parseInt(fooStyle.left) + "px"; }; --> </script> <style type="text/css"> <!-- body { background-color: #FFFFFF; font-family: Arial; color: #000000; margin:0px; } a:link { text-decoration:underline; font-weight:bold; color:#000000; } a:visited { text-decoration:underline; font-weight:bold; color:#000000; } a:hover { text-decoration:underline; font-weight:bold; color:#ffffff; background-color:#000000} a:active { text-decoration:underline; font-weight:bold; color:#000000; } a:focus { text-decoration:underline; font-weight:bold; color:#000000; } .navi { z-index:3; position:absolute; background-color:#dddddd; text-align:right; vertical-align:middle; width:150px; height:350px; top:140px; left:60px; } .abc { background-color:#ddeeee; position:relative; width:150px; height:350px; top:140px; left:60px; } --> </style> </head> <body> <div><a href="div1.html">div1.html</a></div> <div><a href="div3.html">div3.html</a></div> <div id="navigation" class="navi"> <a href="javascript:movehz('navigation', 20);">nach rechts</a><br> </div> <div class="abc" >geassdfv</div> </body> </html>-
Danke für die Antwort, aber ich denke das hilft mir nicht weiter. Ich müsste die Funktion dann für jede einzelne Tabellenzelle aufrufen. Das sind bei mir nicht nur eine riesen Menge Zellen, es werden durch AJAX im laufenden Betrieb auch noch mehr.
-
<script type="text/javascript" >
<!--
function movehz(who, leftright)
{
/*
document.getElementById(who).style.left = leftright + parseInt(document.getElememtById(who).style.left) + "px";
*/
foo = document.getElementById(who);
if (document.body.currentStyle)
{fooStyle = foo.currentStyle;}
else if (window.getComputedStyle)
{fooStyle = window.getComputedStyle(foo, null);}document.getElementById(who).style.left = leftright + parseInt(fooStyle.left) + "px";
Die Position kannst du auch einfacher ermitteln mittels offsetLeft/Top und gegebenenfalls noch die Werte von offsetParent dazu addieren. Beispiele dazu sollten leicht im Internet auffindbar sein.
Struppi.
-
-
document.styleSheets[0].rules[0].selectorText
== "BODY"
sollte "BODY, TD" sein.
IE liest das Stylesheet irgendwie falsch ein bzw. gibt es falsch im Style-DOM wieder.
Seltsam, das kenne ich nur von Regeln, deren Selektor der IE zumindest teilweise nicht kennt. Aber »Typselektor, Typselektor« kann IE eigentlich problemlos.
Versuche mal zwei CSS-Regeln und ändere beide. Bzw. eigentlich sollte IE im standardkonformen Modus die Schriftgröße von body in die tds vererben, also sollte es unnötig sein, beide Elemente anzugeben.
Vielleicht auch mal ohne Prototype versuchen (ich weiß nicht, ob da irgendwo Änderungen an styleSheets vorgenommen werden).Mathias
-
Hi,
IE liest das Stylesheet irgendwie falsch ein bzw. gibt es falsch im Style-DOM wieder.
"Irgendwie falsch" ist gut. =;->
Aber »Typselektor, Typselektor« kann IE eigentlich problemlos.
Gruppenselektoren werden in den IEs intern aufgeteilt in zwei identische Regeln mit den jeweiligen Einzelselektoren.
Aus
Selektor1, Selektor2 { font-size:2em; }macht der IE intern also:Selektor1 { font-size:2em; } Selektor2 { font-size:2em; }Ältere Mozillas machen das übrigens auch.
Und ältere Safaris bilden intern sogar nur die "Selektor1-Regel" ab (gleichwohl gilt die Regel auch Selektor2 - selbst bei dynamischer Änderung)
Gruß, Cybaer
--
Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können.
(Jean-Jacques Rousseau, Philosoph u. Schriftsteller)
-
Gruppenselektoren werden in den IEs intern aufgeteilt in zwei identische Regeln mit den jeweiligen Einzelselektoren.
Stimmt, jetzt wo du es sagst, erinnere ich mich daran, wie ich letztens aus dem Grund styleSheets wie wild nach einer bestimmten Regel durchsucht habe. In den IE8-Developer-Tools werden die Regeln ebenso aufgelistet. Danke für den Hinweis!
Mathias
-
-
-
[latex]Mae govannen![/latex]
Ich habe auf einer Seite einen Link, mit dem ich die Schriftgröße dokumentweit erhöhen bzw. verringern will. Funktioniert scheinbar in allen vernünftigen Browsern, selbstverständlich nicht im IE7. Der erhöht die Schriftgröße nur im freien Text, nicht aber in der Tabelle, die den eigentlichen Inhalt der Seite enthält.
function set_font_size(foo) {if (document.styleSheets[0].cssRules) { document.styleSheets[0].cssRules[0].style.fontSize = foo + "px"; } else { document.styleSheets[0].rules[0].style.fontSize = fontSize + "px"; }}
Abgesehen von der hier sicherlich wieder einmal aufkommenden Diskussion, ob ein Schriftgrößen-Änderungs-Script sinnvoll ist: Ich habe keinen IE7 installiert, kann es daher nicht selber testen, aber wie verhält sich IE (und insbesondere die Tabellen), wenn du statt wie oben über document.styleSheets einfach nur document.body.style.fontSize = fontSize + "px" verwendest? Oder relative Angaben? 1em oder 100% und schalte z.B. in 0.05em oder 0.1em bzw. 5% oder 10% Schritten, je nach Bedarf. Funktioniert das? Cü, Kai P.S.: Basisgröße 10px ist \*viel\* zu klein. Basis 100% oder 1em stellt die Seite bei jedem so dar, wie er es sich wünscht. P.P.S.: Tabellenlayout kann ungeahnte Probleme hervorrufen -- „It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes, it's dark, and we're wearing sunglasses“. „Hit it!“ [Selfzeugs](http://kaichen.in/selfhtml/) SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?-
P.P.S.: Tabellenlayout kann ungeahnte Probleme hervorrufen
Datentabellen auch, wie man sieht. ;)
Mathias
-
Ich habe keinen IE7 installiert, kann es daher nicht selber testen, aber wie verhält sich IE (und insbesondere die Tabellen), wenn du statt wie oben über document.styleSheets einfach nur document.body.style.fontSize = fontSize + "px" verwendest?
Oder relative Angaben? 1em oder 100% und schalte z.B. in 0.05em oder 0.1em bzw. 5% oder 10% Schritten, je nach Bedarf. Funktioniert das?Das hat funktioniert - dankeschön.
Basisgröße 10px ist durch meinen Auftraggeber vorgegeben.
Tabellendesign läuft mit <table>, weil es mir viel Ärger mit einer sich verändernden Anzahl von Spalten erspart.
-