jQuery può modificare il CSS per un tipo di supporto specifico?

È possibile che jQuery modifichi il CSS per un tipo di supporto specifico (ad esempio, stampa)?jQuery può modificare il CSS per un tipo di supporto specifico?

Il mio problema specifico è che sto usando animate su un elemento e sta sovrascrivendo il foglio di stampa, rovinando il mio layout di stampa. Anche se il mio problema è leggermente diverso rispetto alla domanda generale, penso che una risposta dovrebbe aiutarmi a risolvere il mio problema. Sarebbe utile anche qualsiasi soluzione alternativa. Molto obbligato.

fonte

2011-02-07 Perishable Dave

Non è necessario eseguire questa operazione con Javascript. Basta usare la regola @media nel tuo documento css. Puoi scrivere tutte queste cose in un solo file css. Qui è la specifica W3C Documentation

@media screen { 

/* all your fancy screen css with a bunch of animation stuff*/ 

} 

@media print { 

/* all your fancy print css just plain */ 

}

È possibile scrivere le dichiarazioni molto specifici e abbinare tutti gli elementi per le vostre esigenze. Btw è supportato fino a IE6. Funziona come un fascino nei nostri progetti.

@media print { 
    body { font-size: 10pt } 
} 

@media screen { 
    body { font-size: 13px } 
} 

@media screen, print { 
    body { line-height: 1.2 } 
}

fonte

2011-02-07 23:04:43 gearsdigital

Non penso che questo risolva il mio problema. Diciamo che ho impostato il foglio di stile come suggerito. Diciamo che ho specificato diverse larghezze per la stampa e lo schermo. Dopo aver visualizzato la pagina, utilizzo jquery $ (div) .animate ({width: 100px} per modificare la larghezza. Ora, quando ho la stampa del browser, verrà utilizzata la nuova larghezza "100px" anziché la larghezza di stampa. Spero che abbia senso –

Questo è l'indirizzo giusto per il tuo problema :) jQuery scrive la larghezza come inline style (... style = "width: 100px" ...). Gli stili in linea sono più alti nella specificità. Questo è il motivo per cui il tuo browser lavora con la larghezza in linea per stampare il tuo documento. Devi solo sovrascrivere (http://css-tricks.com/override-inline-styles-with-css/) la larghezza dello stile in linea. E in effetti dovresti impostare per il tuo stile di stampa all'interno di '@media print'. – gearsdigital

Dolce, l'override dovrebbe fare il trucco. Grazie! –

Aggiungi un CSS per i file multimediali (stampa) con una norma specifica che nasconde un elemento (ad esempio #div {display: none;})

Nello script, se questo:

$('#div').is(':visible')

è vero, quindi sei su un supporto di stampa (stampa).

fonte

2011-02-07 22:03:45

Approccio intelligente. Bel pensiero, Julien. – Corey

Non penso che funzionerà, almeno non quando si dispone di una pagina caricata su cui si preme il pulsante di stampa. Il problema è che la dom non verrà ricaricata e quindi questo controllo non viene eseguito. Si potrebbe usare 'window.matchMedia ('print')' e ascoltare i cambiamenti dei media ma non è molto affidabile. – Thomas

Funziona (testato) su IE8 +, Chrome e FFox. A proposito, non ha bisogno di un ricaricamento DOM in quanto è un'estensione jQuery (il: pseudo visibile) e puro Javascript. –

jQuery può modificare il CSS per un tipo di supporto specifico?

risposta

Problemi correlati