以编程方式添加/更改样式标签?
在相关的question有人建议我可以通过编辑元素的'style'标签来动态更新媒体查询。我知道它可以使用.css方法使用jquery完成,但显然style标签本身需要更新。以编程方式添加/更改样式标签?
我的最终目标是追加整个媒体查询,我不能这样做,如这里所述,更好的.css方法。如果我使用.css,那么屏幕上的类和媒体查询会发生什么变化。但是,我只想更改媒体查询。问题是我试图改变样式标签中的字体颜色,并且迄今没有运气。
我很欣赏迄今为止所有的回复。
这里是我到目前为止已经试过:
function myFunction() {
$('.changeMe').append("<style type='text/css'>color:blue</>")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()">Click me to change text from black to blue</button>
<p class="changeMe">Change My Color To Blue by adding a style tag</p>
这里是出使用的CSS改变,我不希望在屏幕上的DIV的代码片段。
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect (25, 90, 2500, 400);
}
function changeScale() {
var scale = .1;
console.log("scale:" + scale);
$('.myDivToPrint').css({
'-webkit-transform': 'scale(' + scale + ')',
'-moz-transform': 'scale(' + scale + ')',
'-ms-transform': 'scale(' + scale + ')',
'-o-transform': 'scale(' + scale + ')',
'transform': 'scale(' + scale + ')',
});
}
$(document).ready(function(){
draw_a();
});
div.sizePage {
color: #333;
}
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
@media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: pink;
}
.myDivToPrint {
background-color: yellow;
/*
-moz-transform: rotate(90deg) scale(0.3);
-ms-transform: rotate(90deg) scale(0.3);
-o-transform: rotate(90deg) scale(0.3);
-webkit-transform: rotate(90deg) scale(0.3);
transform: rotate(90deg) scale(0.3); /* Standard Property */
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
/*
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
*/
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<button onclick="changeScale();" class="no-print>">Change Scale (Want this to only change scale in media query.)</button>
<div class="myDivToPrint">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
</div>
下面的代码片段会,我认为增加该媒体查询我所需要的。
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect (25, 90, 2500, 400);
}
function changeScale() {
var scale = .1;
console.log("scale:" + scale);
$('.myDivToPrint').append("<style type='text/css'>@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none){"
+ "-webkit-transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "-moz-transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "-ms-transform: -transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "-o-transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "transform: scale(" + scale + ") translate(100px,100px) rotate(-90deg),"
+ "</style>");
}
$(document).ready(function(){
draw_a();
});
div.sizePage {
color: #333;
}
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
@media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: pink;
}
.myDivToPrint {
background-color: yellow;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<button onclick="changeScale();" class="no-print>">Change Scale</button>
<div class="myDivToPrint">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
</div>
谢谢, 马特
你试图整体风格标签,预先准备的元素。在这里,我用jQuery .css()
方法来改变颜色。
已经阅读关于它here。
function myFunction() {
$('.changeMe').css("color", "blue")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()">Click me to change text from black to blue</button>
<p class="changeMe">Change My Color To Blue by adding a style tag</p>
谢谢你的回答,通常这是正确的。但是,我需要更改媒体查询的CSS。我尝试使用.css修改现有媒体查询,但它只修改了屏幕CSS。所以,添加样式标签是我试图绕过这个问题。 –
要改变使用jQuery给定元素的CSS,你可以使用它的.css()
功能。了解更多关于它here
函数中的第一个值定义你想要的属性来更改(在我们的情况下,它的颜色),第二个是你希望的数值适用于它(在我们的情况下,它是蓝色的)
为了更清晰起见,这可以用于任何CSS几乎。例如。
//change BG color
.css('background-color', 'red');
//change width
.css('width', '100px');
//change font size
.css('font-size', '16px');
为什么刚刚被投票呢? – ProEvilz
我认为,因为OP询问如何使用jQuery更改媒体查询,而不仅仅是修改CSS样式? – DMcCallum83
我没有downvote它,但我认为这是downvoted,因为问题说我试过这个,它不工作,我的目的是改变媒体查询的CSS,而不是在屏幕上。 –
你实际上并不遥远。试着在后面加上整个媒体查询和它的内容以身体/头(不记得每一个在此情况下的行为):
function myFunction()
{
$('body').append("<style type='text/css'>@media screen and (min-width: 500px) { /*styling stuff*/ }</style>");
}
很明显,你可以改变媒体查询类型。我以前见过成功使用过这么好的运气。
我的最终目标是追加整个媒体查询,这是我无法做到的,正如这里所指出的,更好的.css方法。如果我使用.css,那么屏幕上的类和媒体查询会发生什么变化。但是,我只想更改媒体查询。问题是我试图改变样式标签中的字体颜色,并且迄今没有运气。 –
@MatthewDavidJankowski所以,如果我理解正确,你只想改变**媒体查询内的样式**? – ProEvilz
@ProEvilz @Mathew要么或他想更新实际的媒体查询?他可能想要改变'min-width'或添加'max-width'? – DMcCallum83
您试图在p标签中追加。它只会附加在head
。
function myFunction() {
$(head).append("<style type='text/css'>color:blue</>")
}
这与使用'css()'一样有用,因为这不会改变OP想要编辑的已有**现有样式标记** – ProEvilz
尽管这会突出显示当前代码的问题,但它实际上并不回答他的问题,也不是一个可行的答案,因为每次调用该函数时函数都会继续追加,而不会想到之前附加的样式。 –
问题1:在您的当前设置它只会产生这种(你基本上你的段落内追加):
<p class="changeMe">Change My Color To Blue by adding a style tag<style type="text/css">color:blue</></style></p>
问题#2(一旦你解决问题1)如果发生什么你用户不断敲击那个按钮?它会继续追加更多的风格标签上有
这样做的更好的办法是只针对您现有的元素类
<p class="changeMe">Change My Color To Blue by adding a style tag</p>
风格元素添加到页面和目标,那类只需更换所需要改变的全部内容:在事件发生
<style class="changeMe_styles">
</style>
在JS
$(".changeMe_styles").text("@media (min-width: 900px) {.changeMe{ color: blue;}}");
请阅读[doc](http://api.jquery.com/css/),因为它会解释动态应用jQuery css的正确方法。 – Andrei
所以一个更好的设计是不这样做,并使用主题.... – epascarello
我离开了一个答案OP,但我不是100%为什么你想更新媒体查询,而不是改变jQuery目标元素的风格。 – DMcCallum83