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

阿伦·加里茨基（Ahron M. Galitzky）

我有一个的htmlselect元素id，background旨在为设置背景图像<div class=”results-area”>。然后，我有一个打印按钮来打印.results-area内容。

问题是，当我要打印时，.results-area我需要设置要在打印时设置的背景图像，如果使用CSS @media print，则无法设置规则应打印的背景图像（基于用户选择）。

还有另一种方法可以做到这一点吗？

的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的

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


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

CSS：

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

阿伦·加里茨基（Ahron M. Galitzky）

我解决的方法如下。

的HTML

我将值更改为数字“ 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

随着@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查询

$('#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()
});

感觉这是一种疯狂的方式，但是确实成功了。

我希望这也对您有用！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。