Christoph: Media Print Style ändern?

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

  1. 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

    1. 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...

      1. 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

      2. 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

        --
        »Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
        Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford
        ie:( fl:) br:> va:( ls:& fo:) rl:) n3;} n4:} ss:} de:µ js:} mo:? zu:]
        1. 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.