2011-02-07 15 views
13

jQuery'nin belirli bir ortam türü (ör. Baskı) için CSS'yi değiştirmesi mümkün mü?Belirli bir medya türü için jQuery CSS'yi değiştirebilir mi?

Özel sorunum, bir öğede animasyon uygulamakta olduğumu ve yazdırma düzenimi bozan baskı stil sayfasını geçersiz kılmamdır. Benim sorunum genel sorudan biraz farklı olsa da, bir cevabın problemimi çözmemde bana yardımcı olması gerektiğini düşünüyorum. Herhangi bir olası geçici çözüm de yardımcı olabilir. Çok minnettarım.

cevap

6

Bunu Javascript ile yapmanız gerekmez. Sadece css belgenizde @media kuralını kullanın. Tüm bunları sadece bir css dosyasına yazabilirsiniz. İşte spesifik W3C Documentation

@media screen { 

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

} 

@media print { 

/* all your fancy print css just plain */ 

} 

Çok spesifik bildirimleri yazın ve ihtiyaçlarınıza tüm unsurları eşleşebilir olduğunu. Btw, IE6'a kadar desteklenmektedir. Projelerimizde cazibe gibi çalışır.

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

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

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

Bu sorunun benim sorunum olduğunu düşünmeyin. Size önerdiğiniz gibi stil sayfasını ayarladığımı söyleyelim. Baskı ve ekran için farklı genişlikler belirttiğimi söyle. Sayfa görüntülendikten sonra, genişliği değiştirmek için jquery $ (div) .animate ({width: 100px}) kullanıyorum.İimdi tarayıcıyı yazdırdığımda, baskı genişliği yerine yeni "100px" genişliğini kullanacağım. Umarım bu mantıklıdır –

+1

Bu problem için doğru adres :) JQuery, genişliği satır içi stil olarak yazar (… style = "width: 100px"…). Satır İçi Stiller, özellik bakımından daha yüksektir. Bu nedenle tarayıcınız, belgenizi yazdırmak için satır içi genişliği ile çalışır. Satır içi stil genişliğini (http://css-tricks.com/override-inline-styles-with-css/) geçersiz kılmanız yeterlidir. Ve aslında baskı stiliniz için '@ media print' içinde ayarlamalısınız. – gearsdigital

+0

Tatlı, geçersiz kılma hile yapmalıdır. Teşekkürler! –

4

bir elementi gizler belirli kural ile medya (baskı) için bir css ekleyin:;:

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

(örn #div {display hiçbiri})

Senaryonuzun, bu takdirde doğruysa, o zaman bir yazdırma ortamınız (baskı) üzerindedir.

+0

Akıllı yaklaşım. İyi düşünmek Julien. – Corey

+0

Bunun işe yaramayacağını düşünüyorum, en azından yazdırma düğmesine bastığınız yüklü bir sayfanız olduğunda. Sorun, domın yeniden yüklenmemesi ve bu kontrolün yapılmamasıdır. 'window.matchMedia ('print')' işlevini kullanabilir ve medya değişikliklerini dinleyebilirsiniz ancak çok güvenilir değildir. – Thomas

+0

IE8 +, Chrome ve FFox üzerinde çalışır (test edilmiş). BTW, jQuery uzantısı (: görünür sözde) ve saf Javascript olduğu için bir DOM yeniden yüklemesine ihtiyaç duymaz. –

İlgili konular