如何使用jquery设置css @media打印样式

Question

I have an html select element with an id of background designed to set a background image for the <div class=”results-area”> . 我有一个background为id的html select元素，用于设置<div class=”results-area”>的背景图像。 Then I have a print button to print the .results-area content. 然后我有一个打印按钮来打印.results-area内容。

The problem is that when I wanna print the .results-area I need to set what background image to set when printing, if I use CSS @media print I cannot set rules which background it should print (based on user selection). 问题是，当我想要打印.results-area我需要设置打印时要设置的背景图像，如果我使用CSS @media print我无法设置应该打印哪个背景的规则（基于用户选择）。

Is there another way to accomplish that? 还有另一种方法可以实现吗？

HTML HTML

<select id="background">
<option value="url(picture1.jpg)">picture1</option>
<option value="url(picture2.jpg)">picture2</option>
<option value="url(picture3.jpg)">picture3</option>
<option value="url(picture4.jpg)">picture4</option>
<option value="url(picture5.jpg)">picture5</option>
<option value="url(picture6.jpg)">picture6</option>
</select>

<div class=”results-area”>
...
</div>

<a id="printMe" class="btn btn-warning">Print</a>

jQuery jQuery的

$('#background').change(function () {
    $('.results-area').css("background-image", $(this).val());
})


$('#printMe').click(function () {
 print() 
});

CSS: CSS：

@media print {
          .results-area{
              background-image: ??????;
          }
    }

Answer 1

Add a <style> tag to your <head> and give it an id: 将<style>标记添加到<head>并为其指定一个ID：

<head>
...
<style id="bg-for-print"></style>
...
</head>

Then when you want to change the background image, select that style tag and set the appropriate background image: 然后，当您想要更改背景图像时，请选择该样式标记并设置相应的背景图像：

$("#bg-for-print").text(
    "@media print {" +
        ".results-area{" +
            "background-image: url(" + backgroundUrl + ");" +
        "}" +
    "}"
);

Answer 2

The way I solved it is as follows. 我解决它的方式如下。

HTML HTML

I changed the values to digits "1-2-3..." And added a class to each picture "abc..." 我将值更改为数字“1-2-3 ...”并为每张图片添加了一个类“abc ...”

<select id="background">
   <option class="a" value="1">Picture 1</option>
   <option class="b" value="2">Picture 2</option>
   <option class="c" value="3">Picture 3</option>
   <option class="d" value="4">Picture 4</option>
   <option class="e" value="5">Picture 5</option>
   <option class="f" value="6">Picture 6</option>
</select>

<div class=”results-area”>
...
</div>

<a id="printMe" class="btn btn-warning">Print</a>

CSS CSS

With the @media print I specified for each class his own background-image 使用@media print我为每个类指定了他自己的background-image

@media print {
   .a {
     background-image: url(image1.jpg) !important;
   }

   .b {
     background-image: url(image2.jpg) !important;
   }

   .c{
     background-image: url(image3.jpg) !important;
   }

   .d{
     background-image: url(image4.jpg) !important;
   }

   .e {
     background-image: url(image5.jpg) !important;
   }

   .f {
     background-image: url(image6.jpg) !important;
   }
}

JQuery JQuery的

$('#background').change(function () {
    if ($(this).val() === "1") {
    $('.results-area').css("background-image", "url(image1.jpg)");
    replace();
    $('.results-area').addClass("a");
}
else if ($(this).val() === "2") {
    $('.results-area').css("background-image", "url(image2.jpg)");
    replace();
    $('.results-area').addClass("b");
}
else if ($(this).val() === "3") {
    $('.results-area').css("background-image", "url(image3.jpg)");
    replace();
    $('.results-area').addClass("c");
}
else if ($(this).val() === "4") {
    $('.results-area').css("background-image", "url(image4.jpg)");
    replace();
    $('.results-area').addClass("d");
}
else if ($(this).val() === "5") {
    $('.results-area').css("background-image", "url(image5.jpg)");
    replace();
    $('.results-area').addClass("e");
}
else if ($(this).val() === "6") {
    $('.results-area').css("background-image", "url(image6.jpg)");
    replace();
    $('.results-area').addClass("f");
}
else {
    replace();
}
});


function replace() {
    $('.results-area').removeClass("a b c d e f");
};

$('#printMe').click(function () {

        print()
});

It feels like a crazy way of doing it, but it did the job. 感觉这是一种疯狂的做法，但它完成了这项工作。

I hope this works for you too! 我希望这也适合你！

Answer 3

Set background image using jquery and set the background-size:0; 使用jquery设置背景图像并设置background-size:0; in default and background-size: inherit; 默认情况下和background-size: inherit; in print media 在印刷媒体

 $('select').on('change', function() { $('.results-area').css("background-image",'url(\\''+this.value+'\\')'); }); $('#printMe').click(function () { window.print(); }); $('.results-area').css("background-image",'url(\\''+$('select')[0].value+'\\')');

 .results-area{ width:225px; height:225px; background-size: 0; border:solid 1px red; } @media print { .results-area{ background-size: inherit; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selImage"> <option value="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTBoO6az8tPqavBo9xddKQynhqR8YSt4MUWTouGdFp7bWfxJiyW" selected>bg1</option> <option value="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSIo-K6XoQSaPZp_MP_TD4OeIdu229F4TCnZARtoiWvHJmI3iy8">bg2</option> </select> <input type="button" id="printMe" value="print"/> <div class="results-area"> </div>

如何使用jquery设置css @media打印样式

问题描述

3 个解决方案

解决方案1
1 2016-12-01 19:55:19

解决方案2
1 已采纳 2016-12-06 18:16:40

解决方案3
0 2016-12-01 20:17:39

如何使用jquery设置css @media打印样式

问题描述

3 个解决方案

解决方案1 1 2016-12-01 19:55:19

解决方案2 1 已采纳 2016-12-06 18:16:40

解决方案3 0 2016-12-01 20:17:39

解决方案1
1 2016-12-01 19:55:19

解决方案2
1 已采纳 2016-12-06 18:16:40

解决方案3
0 2016-12-01 20:17:39