以编程方式添加/更改样式标签？答案

【问题标题】：Programmatically add/change a style tag?以编程方式添加/更改样式标签？
【发布时间】：2017-09-15 04:33:23
【问题描述】：

在相关的question 中，有人建议我可以通过编辑元素“样式”标签来动态更新媒体查询。我知道可以使用 .css 方法使用 jquery 来完成，但显然样式标签本身需要更新。

我的最终目标是附加整个媒体查询，正如此处所述，我无法使用 .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>

这是一个代码 sn-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>

这是一个代码 sn-p，我想添加我需要的媒体查询。

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>

谢谢，马特

【问题讨论】：

请阅读doc，因为它将解释动态应用jQuery css的正确方法。
所以更好的设计不是这样做并使用主题......
我留下了答案 OP，但我不是 100% 为什么要更新媒体查询而不是更改 jQuery 目标元素的样式。
可以做到，但是有很多比破解style 元素更好的方法
您说您必须编辑其自身的样式标签，这意味着内联样式。您没有使用内联样式。此外，想要在 DOM 中编辑实际的样式标签是……奇怪。为什么/您必须更改标签而不是直接应用 CSS 的理由是什么？

标签： javascript jquery html css

【解决方案1】：

问题 #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;}}");

【讨论】：

【解决方案2】：

要使用 jQuery 更改给定元素的 CSS，您可以使用它的 .css() 函数。阅读更多关于它的信息here

函数中的第一个值定义您要更改的属性（在我们的例子中是颜色），第二个是您希望应用到它的值（在我们的例子中是蓝色）

function myFunction() {
    $('.changeMe').css("color","blue");
}

为了更清楚，这几乎可以用于任何 CSS。例如

//change BG color
.css('background-color', 'red');

//change width
.css('width', '100px');

//change font size
.css('font-size', '16px');

【讨论】：

我认为是因为 OP 询问如何使用 jQuery 更改媒体查询，而不仅仅是修改 css 样式？
我没有否决它，但我确实认为它被否决了，因为问题指出我尝试了这个，但它并没有达到我的目的，即更改媒体查询的 css 而不是在屏幕上。

【解决方案3】：

您正在尝试添加 p 标签。它只会附加在head 中。

function myFunction() {
    $(head).append("<style type='text/css'>color:blue</>")
}

【讨论】：

这与使用css() 一样有用，因为这不会改变OP 想要编辑已经存在的样式标签跨度>
虽然这确实突出了他当前代码的一个问题，但它实际上并没有回答他的问题，也不是一个可行的答案，因为每次调用该函数时该函数都会继续附加而无需考虑以前附加的样式。
@TravisActon 是的，但是我们可以参考这个

【解决方案4】：

其实离你不远了。尝试将整个媒体查询及其内容附加到正文/头部（不记得在这种情况下每个人的行为方式）：

function myFunction()
  {
    $('body').append("<style type='text/css'>@media screen and (min-width: 500px) { /*styling stuff*/ }</style>");
  }

显然，您可以更改媒体查询类型。我已经看到之前成功使用过，祝你好运。

【讨论】：

我的最终目标是附加整个媒体查询，正如这里所指出的，我无法使用 .css 的更好方法。如果我使用 .css，那么屏幕上的类和媒体查询会发生变化。但是，我只想更改媒体查询。问题是我试图改变样式标签中的字体颜色，到目前为止还没有运气。
@MatthewDavidJankowski 如果我理解正确，您只想更改媒体查询内部的样式？
@ProEvilz @Mathew 或者他想更新实际的媒体查询？他可能想更改min-width 或添加max-width？
我需要缩放与嵌入式 svg 相结合的画布图像以进行打印输出，到目前为止，我发现 css 转换属性最有希望。这是那个问题：stackoverflow.com/questions/46202655/…
这真的很令人困惑......你需要更清楚和准确地了解你需要什么。

【解决方案5】：

您正在尝试将整个样式标记添加到元素。在这里，我使用了 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。因此，添加样式标签是我规避问题的尝试。