Media Print Style ändern?
Christoph
- javascript
Hallo zusammen,
hab jetzt lange gesucht und nix gefunden... kann man mit JS die Style Eigenschaften nur für den Ausdruck ändern? Z. B. würde ich hier gerne nur die Breite für das Element im Ausdruck (@media print) ändern:
<input type="text" name="test" onChange="this.style.width = '15em';">
hier wird es für den Ausdruck und den Bildschirm geändert...
Wär super, wenn mir da jemand weiterhelfen könnte...
Grüße
Christoph
Wär super, wenn mir da jemand weiterhelfen könnte...
warum definierst du nicht gleich ein hardcodiertes stylesheet für die druckansicht - mit javascript manipulieren ist immer schlecht
Das passt in dem Fall nicht so gut. Meine Idee ist eigentlich folgende: Ich mach ein Formular, welches man natürlich auch ausdrucken können soll. Damit man es auch ausgedruckt noch gut ausfüllen kann, blend ich die (ausgedruckt) häßlichen Input Felder aus. Sollte aber jemand schon online was reingeschrieben haben, muss das natürlich auch ausgedruckt werden. Das würde an sich schon klappen, nur hauts mir irgendwie dann die Schriftgröße etc. wieder durchnander, und da hätt ich gern die Möglichkeit no a bissle rumzumändern...
Das passt in dem Fall nicht so gut. Meine Idee ist eigentlich folgende: [...]
deine idee ist gut und löblich - ich sehe jetzt spontan aber nicht, wo genau du javascript benötigst um nachträglich noch style-informationen zu setzen
du musst also lediglich die schriftgröße auch in deinem print-stylesheet korrekt setzen
gruss Christoph,
Das passt in dem Fall nicht so gut. Meine Idee ist eigentlich folgende:
Ich mach ein Formular, welches man natürlich auch ausdrucken können soll.
Damit man es auch ausgedruckt noch gut ausfüllen kann, blend ich die
(ausgedruckt) häßlichen Input Felder aus. Sollte aber jemand schon online
was reingeschrieben haben, muss das natürlich auch ausgedruckt werden.
Das würde an sich schon klappen, nur hauts mir irgendwie dann die Schriftgröße
etc. wieder durchnander, und da hätt ich gern die Möglichkeit no a bissle
rumzumändern ...
dann setzt doch die obige textaufgabe einfach nur um:
css-regeln - grob fuer die streber-browser (musst Du dann noch anpassen):
input[type=text] {/*
was auch immer als default
\*/
}
@media print {/*
input[type=text], bzw. nur \*/
input[type=text].empty {
display: none;
}
input[type=text].notEmpty {/*
was auch immer, um beim druck gut auszusehen.
\*/
}
}
und jetzt zum JavaScript-teil, der code ist nur beispielhaft und
kann/sollte/muss mit der bibliothek Deiner wahl umgesetzt werden:
(function () {
var regXWhiteSpaceOnly = (/^\s+$/);
var regXClassNameEmpty = (/(?:\s+|^)empty(?:\s+|$)/g);
var regXClassNameNotEmpty = (/(?:\s+|^)+notEmpty(?:\s+|$)/g);
var applyClassName = (function () {
var str = this.value;
if ((str === "") || regXWhiteSpaceOnly.test(str)) {
this.className = this.className.replace(regXClassNameNotEmpty, "").replace(regXClassNameEmpty, "") + " empty";
} else {
this.className = this.className.replace(regXClassNameNotEmpty, "").replace(regXClassNameEmpty, "") + " notEmpty";
}
});
var enablePrintBehavior = (function () {
Array.forEach(document.getElementsByTagName("input"), (function (elm/*, idx, arr*/) {
if (elm.type == "text") {
applyClassName.call(elm);
elm.onblur = applyClassName;
}
}));
delete arguments.callee;
});
(function () {
if (window.addEventListener) {
window.addEventListener("load", enablePrintBehavior, false);
} else if (window.attachEvent) {
window.attachEvent("onload", enablePrintBehavior);
}
delete arguments.callee;
})();
})();
so long - peterS. - pseliger@gmx.net
Hallo PeterS.,
danke für die Hilfe. Der Code schaumt mir zwar a bissle kompiziert aus, aber im Grunde heißt das Ganze ja nur, dass ich die Klasse des entsprechenden Input Felds ändere... bin ich irgendwie nicht draufkommen.
grüße
C.