Question

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

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

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

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

感谢。

Answer 1

为特定容器添加一个额外的生成类名，并添加一个style元素（here's how）和相关规则，例如：

.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>

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

1 个答案: