Changer de support spécifique des propriétés CSS à partir de Javascript

J'ai une propriété CSS (police) que j'ai besoin d'être en mesure de changer à partir de Javascript (un menu déroulant). Cependant, cette police ne doit être utilisé lors de l'impression (@media print).

Donc, le javascript ne pouvez pas modifier la valeur de la police, parce que l'effet de la vue à l'écran. Est-il possible de changer UNIQUEMENT la version imprimée de la police de la propriété?

Sinon est-il un moyen d'avoir une propriété CSS être une référence à une autre propriété?

De cette façon, dans l'impression CSS, je pourrais dire à la police:printfont, et dans l'écran de police CSS:12. Et puis modifiez la valeur de printfont, et ne changer la police lors de l'impression.

grâce.

EDIT: Le point est que j'ai besoin d'être en mesure de modifier la taille de police que le document est imprimé à partir du menu déroulant, mais je ne veux pas changer la taille de police que le document est affiché au.

OriginalL'auteur Brian Postow | 2009-04-28

  1. 10

    C'est un dilemme intéressant, vous avez là. Sur le dessus de ma tête, la seule chose que je peux penser est d'ajouter un nouveau tag à l'en-tête où votre taille de police est déclarée avec !important. Par exemple, dans vos balises d'en-tête:

    <style type="text/css" media="print">

.printfont {
    font-size: 16px !important;
}

</style>

    Cela permettra d'assurer que la nouvelle taille de police aura préséance.

    Voici un rapide exemple de la façon dont vous pouvez accomplir cela avec le javascript

    <script type="text/javascript">

    var inlineMediaStyle = null;

    function changeMediaStyle ()
    {
        var head = document.getElementsByTagName('head')[0];
        var newStyle = document.createElement('style');
        newStyle.setAttribute('type', 'text/css');
        newStyle.setAttribute('media', 'print');
        newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}'));

        if (inlineMediaStyle != null)
        {
            head.replaceChild(newStyle, inlineMediaStyle)
        }
        else
        {
            head.appendChild(newStyle);
        }
        inlineMediaStyle = newStyle;
    }

</script>

    Assurez-vous juste que vous avez onchange="changeMediaStyle()" comme un attribut sur votre liste déroulante. Aussi, comme un avertissement dans mon exemple, je ne suis pas de comptabilité pour des choses comme des fuites de mémoire, de sorte que vous aurez à travailler sur ce genre de questions sur votre propre.

    Quant à votre autre question, autant que je sache, il n'existe pas de méthode pour déclarer les/en utilisant ce qui est essentiellement CSS variables. Cependant, il n'existe actuellement une recommandation pour: http://disruptive-innovations.com/zoo/cssvariables/

    Mais alors, comment puis-je changer qu'à partir du javascript dans le menu déroulant?
    N'ajoutez pas sur le côté serveur, puis sur le premier changement dans le menu, l'utilisation de Javascript pour l'ajouter à la dom et de conserver une référence à elle. Si l'utilisateur change la valeur (déroulant) de nouveau, le retirer de la dom, et ajouter de nouveau avec la mise à jour de valeur(s).
    Mais comment puis-je (en javascript) de supprimer ou d'ajouter une propriété que dans le @media print cas?
    J'ai mis à jour ma réponse originale à cette question avec un exemple.
    +1 Bravo pour l'utilisation de JavaScript (et pas jQuery), comme demandé.

    OriginalL'auteur Jordan S. Jones

  2. 3

    semble que ce que vous voulez faire est de myabe il suffit de changer ou d'ajouter une classe à l'élément avec JS

    <p class="inrto comicSans">this is the text to change</p>

@screen p.intro {font-family:verdana;}

@print p.comicSans {font-family:comic-sans;}
    Je ne comprends pas cette suggestion. J'ai besoin de changer la police (taille, mais qui n'a pas d'importance) à l'INTERFACE utilisateur le temps. Donc, je veux que l'utilisateur soit en mesure d'utiliser une liste déroulante pour modifier la taille, et puis lors de l'impression, il utilise cette taille.
    si ses le cas de la taille de la police alors je suppose que vous avez un nombre limité d'options. delcare comme les valeurs d'une série de la classe et d'appliquer ensuite un nom de classe à votre balise body... la même notation que j'ai décrit ci-dessus .largeFont {font-size:1.5 em;} .mediumFont {font-size:cadratin (1 em:} ajouter ces classes de votre corps (bien sûr, cela ne fonctionnera que si ils sont relatifs et non pas fixe!)

    OriginalL'auteur nickmorss

  3. 0

    Vous pouvez simplement utiliser JavaScript pour changer de classe, et ont le

    @print {
  .myPrintClass { font-family: serif; }
}
@screen {
  .defaultClass { font-family: sans-serif; }
}

    OriginalL'auteur Steve Perks

  4. 0

    Tandis que la classe de base des solutions totalement de travail, vous pouvez aussi utiliser Javascript pour ajouter dynamiquement un nouveau <link> tag de la page. Par exemple, si vous avez:

    stylesheet1.css:

    @print * {font-family:verdana;}

    stylesheet2.css:

    @print * {font-family:comicSans;}

    Vous pouvez ensuite utiliser jQuery pour faire quelque chose comme:

    $(document.body).append("<link href='stylesheet2.css'/>");

    (vous pourriez le faire sans jQuery trop, mais j'ai oublié de syntaxe et je suis trop paresseux pour le chercher ;-)).

    Toutefois, si vous êtes en changeant seulement de petites quantités, d'une seule feuille de style + classes différentes est probablement la meilleure façon d'aller; la nouvelle <link> tag solution n'est utile que si vous avez un tas de différents changements de style de passe.

    Je suis actuellement à l'aide de l'classés en fonction de la solution. le problème est que je ne peux pas changer toutes les valeurs à la volée!

    OriginalL'auteur machineghost