zoukankan      html  css  js  c++  java
  • 用 JavaScript 修改样式元素

    利用 <style> 元素,我们可以在网页中嵌入样式表。如果需要动态增加 <style> 元素,似乎可以用如下的 JavaScript 代码:

    var style = document.createElement("style");
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
    style.type = "text/css";
    style.id = "some-id";
    style.innerHTML = css;
    

    但是,这样直接用 style.innerHTML 有两个问题:一是在 IE 8- 这样使用会出现错误,二是样式表中的一些特殊字符可能会导致问题,改用 innerText 或者 textContent 也许更好。

    实际上,更稳妥的方法应该是从 css 内容创建一个子文本节点,然后添加到 style 元素中。例如:

    var style = document.createElement("style");
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
    style.type = "text/css";
    style.id = "some-id";
    if (style.styleSheet) { // IE8
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    

    同样的,针对 IE8- 需要另外处理。

    创建了样式表之后,如果需要添加或者删除某个样式规则,可以用如下的方式:

    var style = document.getElementById("some-id"),
        sheet = style.sheet || style.styleSheet;
    
    if (sheet.insertRule) {
      sheet.insertRule("body: {color: green;}", 0);
    } else if (sheet.addRule) {
      sheet.addRule("body", "color: green;", 0); // IE8-
    }
    
    if (sheet.deleteRule) {
      sheet.deleteRule(0);
    } else if (sheet.removeRule) {
      sheet.removeRule(0); // IE8-
    }
    

    其中的参数 0 表示所插入或者删除的样式规则的位置。同样的,在 IE8- 中没有标准的 style.sheet 以及 sheet.insertRule 和 sheet.deleteRule,所以我们改用 IE 专有的方法。

    参考资料:
    [1] Creating Style Node, and IE headaches - Stack Overflow
    [2] CSSStyleSheet.insertRule - Web API Interfaces | MDN
    [3] CSSStyleSheet.deleteRule - Web API Interfaces | MDN
    [4] IHTMLStyleSheet::addRule method (Internet Explorer)
    [5] IHTMLStyleSheet::removeRule method (Internet Explorer)

  • 相关阅读:
    数据结构算法练习(一)
    crontab详解
    git遇到问题
    docker容器管理
    docker及服务器遇到的坑
    shell study
    低级终端IO
    高级IO
    信号处理
    UNIX日期与时间
  • 原文地址:https://www.cnblogs.com/zoho/p/3523129.html
Copyright © 2011-2022 走看看