为特定的元素子元素注入css规则

Inject css rule for specific element children

本文关键字：元素 注入 css 规则      更新时间：2023-09-26

在javascript中只对特定元素应用css规则的最佳方法是什么?

JSBIN例子

将构造的容器追加到DOM后，我想为新元素设置规则

'table-container > span { width : ' + calculated_width + 'px } ';

的大小可能会改变，所以我尽量避免设置它直接在子元素。页面上可能有几个这样的元素，所以我不能在主样式表中全局设置它。

谢谢。

给特定容器一个额外的、生成的类名，并使用相关规则添加一个style元素(如下所示)，例如:

.array-container.width-28 > span { width : 28px }

…如果你想要的宽度是28px

你会改变这一行:

container.setAttribute('class','array-container');


container.className = 'array-container width-' + width;

跟踪你添加的style元素，这样如果你需要一个值两次，你就不必为相同的值添加第二个style元素。

这里是一个非常快速和肮脏的例子:Live Copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Dynamic Style Example</title>
  <style>
    .array-container span {
      display: inline-block;
      border: 1px solid #08f;
      height: 1em;
    }
  </style>
</head>
<body>
  <label>Add elements with width:
    <input type="number" value="10" min="10" max="10000" id="width-to-use">
  </label>
  <input type="button" value="Add" id="btn-add">
  <script>
    (function() {
      document.getElementById("btn-add").onclick = function() {
        var width, div, css, style;
        width = parseInt(document.getElementById("width-to-use").value, 10);
        if (isNaN(width)) {
          return;
        }
        div = document.createElement('div');
        div.innerHTML =
          "<span></span>" +
          "<span></span>" +
          "<span></span>";
        div.className = "array-container width-" + width;
        if (document.getElementById("style-width-" + width) === null) {
          css = ".array-container.width-" + width + " span { " +
            "width: " + width + "px; " +
            "}";
          style = document.createElement('style');
          style.id = "style-width-" + width;
          style.type = "text/css";
          if (style.styleSheet){
            style.styleSheet.cssText = css;
          }
          else {
            style.appendChild(document.createTextNode(css));
          }
          document.getElementsByTagName("head")[0].appendChild(style);
        }
        document.body.appendChild(div);
      };
      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>
相关文章：