jqueryでCSSの@mediaプリントスタイリングを設定する方法

の背景イメージを設定するように設計されたidのbackgroundというhtmlのselect要素があります。次に、.results-areaの内容を印刷するための印刷ボタンがあります。jqueryでCSSの@mediaプリントスタイリングを設定する方法

.results-area印刷時に設定する背景イメージを設定する必要があるという問題があります。@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: ??????; 
      } 
    }

出典

2016-12-01 Ahron Moshe Galitzky

http：// stackoverflowを見てください。com/questions/512054/setting-background-image-using-jquery-css-property – Bindrid

多くのデフォルトのブラウザ設定では、バックグラウンドイメージの印刷がオフになっています。だから、これは何に関係なく多くのユーザーのために印刷されません。 – andi

私が解決した方法は次のとおりです。

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

それはそれを行うの狂った道のように感じるが、それは仕事をしてくれました。

私はこれもあなたのために働くことを願っています！

出典

2016-12-06 18:16:40

あなたに<style>タグを追加R <head>それにID与える：

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

出典

2016-12-01 19:55:19 cooljeffro

設定した背景画像使用してjQueryと設定：あなたは、背景画像を変更するには、そのスタイルのタグを選択し、適切な背景画像を設定したいときに

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

を印刷メディアでデフォルトで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>

出典

2016-12-01 20:17:39 jafarbtech

jqueryでCSSの@mediaプリントスタイリングを設定する方法

答えて

関連する問題