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

yc0p9oo0 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(103)

我有一个html select元素，其中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: ??????;
          }
    }

型

jquery

来源：https://stackoverflow.com/questions/40918595/how-to-set-css-media-print-styling-with-jquery

3条答案

按热度按时间

niwlg2el1#

我解决它的方法如下。

HTML

我将值更改为数字“1-2-3...”，并为每张图片“a-b-c...”添加了一个类。

<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

我为每个类指定了自己的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()
});

型
这感觉像是一种疯狂的方式，但它确实起到了作用。
我希望这对你也有效！

赞(0）回复(0）举报 2023-08-04

rt4zxlrg2#

将<style>标记添加到<head>并给予一个id：

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

字符串
然后，当您要更改背景图像时，选择该样式标记并设置相应的背景图像：

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

型

赞(0）回复(0）举报 2023-08-04

ne5o7dgx3#

使用jquery设置背景图片，默认设置background-size:0;，打印介质设置background-size: inherit;

$('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>

赞(0）回复(0）举报 2023-08-04

我来回答

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

3条答案

相关问题

热门标签

最新问答