Question

我正在尝试更改标题中的CSS样式，但我无法弄明白。我已经在互联网上搜索了相关的东西，＆amp;发现这些是最接近的：.css（）,. addClass（）

我使用canvas生成了一个图像，然后将其转换为base64文本。现在我需要将它粘贴到主CSS中以获得这样的结果：

<head><style>
    .icoDL{width:20px; height:20px; background-image: url("data:image/png;base64,abcdabcdabcd");}
</style></head><body>
    <div class="icoDL"></div> Link 1
    <div class="icoDL"></div> Link 2
    <div class="icoDL"></div> Link 3
</body>

然而，我发现的结果是这样的：

<div class="icoDL" style="background-image: url('data:image/png;base64,abcdabcdabcd . . .
    Some link
<div class="icoDL" style="background-image: url('data:image/png;base64,abcdabcdabcd . . .
    Another link

我希望它在头脑中，因此它不会破坏计算机的性能。

其他人提出了相同或类似的问题，＆amp;我在所有人中看到.css()，＆amp; .addClass()。但这对我不起作用。

.CSS（）只是将样式添加到元素中，如下所示：

自：

<!DOCTYPE html><html><head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <p>Just roll the mouse over me.</p>

  <p>Or me to see a color change.</p>


<script>
  $("p").mouseover(function () {
    $(this).css("color","red");
  });
</script></body></html>

要：

<!DOCTYPE html><html><head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"/>
</head>
<body>

  <p style="color: red;">Just roll the mouse over me.</p>

  <p style="color: red;">Or me to see a color change.</p>

<script>
  $("p").mouseover(function () {
    $(this).css("color","red");
  });
</script></body></html>

.addClass（）做同样的事情，据我所知：

自：

<!DOCTYPE html><html><head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;

    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }

    return addedClass;
  });
</script></body></html>

要：

<!DOCTYPE html><html><head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"/>
</head>
<body>

 <div>This div should be white</div>
 <div class="red green">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There is one green div</p>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;

    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }

    return addedClass;
  });
</script></body></html>

据我所知，这些功能不是我想要的。我觉得我读错了。

有人有任何建议吗？

感谢阅读。

Answer 1

你试过这样的事吗，

$(".icoDL").css("color","red");

Answer 2

试试这个：

（甚至不使用jQuery，它是直接的javascript）

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "div { background: white; } p { color:blue; width:200px; font-size:14px; } ";
document.body.appendChild(css);

Answer 3

您可以通过document.styleSheets直接修改样式表，虽然不同浏览器的方法略有不同，但这可能是一个相当痛苦的过程。;）

在此处阅读更多内容：http://www.quirksmode.org/dom/changess.html

Answer 4

在大多数情况下，Javascript会附加内联样式，这就是你所看到的，它是完全正常的，几乎每个网站都使用它，所以没有什么可担心的。

有一些方法可以更改外部样式表或访问头部本身的样式标记，但没有充分的理由这样做，除非在一些非常特殊的情况下。

您还应该始终将您的函数包含在document.ready函数中，以确保在附加处理程序时加载元素，如果执行内联js，最好是这样的：

<script type="text/javascript">
  $(document).ready(function() {
      $("div").addClass(function(index, currentClass) {
          var addedClass;

          if ( currentClass === "red" ) {
             addedClass = "green";
             $("p").text("There is one green div");
          }

          return addedClass;
      });
  });
</script>

用jQuery改变CSS

4 个答案: