0

私は次の問題に直面しています：WordPressテーマの印刷版を適応させようとしています。テーマには、含まれているスクリプトから生成されたjQuery画像のスライドショーが含まれていますが、変更することは想定されていません。

HTMLでは、スライドショーはulであり、各liには1つの画像が含まれています。li要素には「featured」クラスと「slide_number_n」クラスがあり、nはスライドの番号です（つまり、slide_number_1、slide_number_2など）。

したがって、スライドショーは次のようになります。

<ul class="slideshow_container">
  <li class="featured slide_number_1" style="display:block"><img src="foo.jpg" /></li>
  <li class="featured slide_number_2" style="display:none"><img src="bar.jpg" /></li>
</ul>

ページの印刷版を見ると（もちろん）、スライドショーのすべての画像が含まれていますが、お客様は最初の表示のみを表示したいので、それを変更してみました。しかし、スライドショーに最初の画像が表示された後に印刷バージョンを開くと、JSがすべての表示値をインラインでオーバーライドしているため、画像がまったく表示されません。print.cssを使用!importantしていなくても、これらのJSの変更を元に戻すことはできません。li[style]

print.cssでJSによって行われた変更を元に戻す方法はありますか？

ありがとう、よろしく、ジュリアン

4

2 に答える 2

1

!important動作するはずです。

私の例を参照してください: http://jsfiddle.net/CqAXu/

機能しない場合は、コードをさらに確認する必要があります。

于 2012-05-30T14:52:13.447 に答える
0

最初のものだけを印刷するには：

<style media="print">
    #slideshow_container .feature {
        display: none!important;
    }

    #slideshow_container :first-child {
        display: list-item!important;
    }
</style>

<ul id="slideshow_container">
    <li class="feature" style="display: none">Print</li>
    <li class="feature" style="display: list-item">Noprint, Current</li>
    <li class="feature" style="display: none">Noprint</li>
    <li class="feature" style="display: none">Noprint</li>
    <li class="feature" style="display: none">Noprint</li>
</ul>
于 2012-05-30T15:49:19.307 に答える