javascript - Jquery/CSS 以 print 中的类为目标

Question

我正在尝试将一些 HTML 添加到一个类中......任何想法为什么下面不起作用？

查询：

$("ul#breadcrumbs li[media='print']").append("<strong>Hello</strong>");

HTML：

<ul id="breadcrumbs">   
        <li class="">
            <a href="supporting-overview.html">Supporting Units</a>
        </li>

        <li class="">
            <a href="literacy-and-learning.html">Language of geography</a>
        </li>

        <li class="active">
            <a href="literacy-and-learning.html">literacy and learning</a>
        </li>

</ul>

Answer 1

选择器ul#breadcrumbs li[media='print']查找具有值eg的liwith 属性。您的 html中没有这样的内容，因此没有进行选择，也没有附加元素。mediaprint<li media='print'>li

Answer 2

您正在尝试将li元素与属性匹配media="print"。目前您没有具有li此类属性的单个元素。

要使代码正常工作，您需要拥有

<ul id="breadcrumbs">   
        <li class="">
            <a href="supporting-overview.html">Supporting Units</a>
        </li>

        <li class="" media="print">
            <a href="literacy-and-learning.html">Language of geography</a>
        </li>

        <li class="active">
            <a href="literacy-and-learning.html">literacy and learning</a>
        </li>

</ul>

$("ul#breadcrumbs li[media='print']").append("<strong>Hello</strong>");

现场演示

Answer 3

穆萨是对的。jQuery 只会针对 html 中定义的标签和标签属性。

要实现您想要的，您可以向要附加的元素添加一个类

$("ul#breadcrumbs li").append("<strong class='visible-in-print'>Hello</strong>");

并将此元素隐藏在所有媒体类型中，除了media @print

.visible-in-print {
    display: none;
}

@media print {
    .visible-in-print { 
        display: inline;
    }
}

Answer 4

我试过这个

$( document ).attr( 'style', '@media print { body { font-size: 15pt } }' )