14

我想在生成内容后更改样式标签。如何将样式添加到样式标签？我尝试使用：

document.getElementById('style').appendChild(styleContents);

但它没有用

4

8 回答 8

24

您可能正在尝试将 css 添加到样式标签。这可以使用以下方法完成：

document.getElementsByTagName('style')[0].innerHTML=""; //some css goes here

您还可以使用：

document.styleSheets[0].cssText = ""; //some css goes here
于 2012-11-13T08:30:52.240 回答
20

我知道这是一个老问题，但我一直在尝试找出一种方法来动态更新这些，而不直接将样式应用于元素。

如果你给一个样式标签一个 ID 并选择它，你就可以使用 sheet 属性访问它的 CSS。

从这里你可以更新你想要的任何东西。通过替换标签内的整个 CSS 或更新单个类。

document.getElementById('somestyletagid').sheet.cssRules[0].selectorText

这是你的类选择器。

document.getElementById('somestyletagid').sheet.cssRules[0].style

这些是该类的所有单独的 css 属性。

您可以通过执行以下操作更新背景颜色：

document.getElementById('somestyletagid').sheet.cssRules[0].style.backgroundColor = 'red'

这是一种访问 html 中任何样式标签的方法。不幸的是，我能找到的每个 CSSStyleRule 都没有严格唯一的 ID。最接近的是 selectorText 但显然可以重复。无论哪种方式至少满足我的需要，这正是我所需要的。

您还可以使用 document.styleSheets 更新任何包含的 CSS 文件，并以通常相同的方式访问它们。

document.styleSheets[0].href

包含的 css 文件的 href。

document.styleSheets[0].cssRules

表中的所有类。

希望这对某人有帮助！

于 2015-09-18T18:33:51.070 回答
4

一个style元素没有子元素，因为它的内容根据定义只是文本（就 HTML 而言）。但这意味着您可以使用该innerHTML属性附加到其内容。如果你的元素有<style id=foo>，那么你写：

document.getElementById('foo').innerHTML += styleContents;
于 2012-11-13T08:48:38.687 回答
4

我在http://jsfiddle.net/fttS5/1/上放了一个简单的例子。

您可以将 id 附加到样式标签，就像在 HTML 中的任何其他元素一样。

<style id="style"></style>

现在您可以使用您尝试使用 appendChild 的代码并添加一个快速更改

document.getElementById('style').appendChild(document.createTextNode(styleContents));

这应该可以解决问题。祝你好运。

您也可以只使用下面我的答案中列出的 innerHTML 方法。

于 2012-11-13T09:06:48.317 回答
2

试试这个

var currentElement = document.getElementById('style');
var currentStyle = currentElement.getAttribute('style');
var stylePieces = [];
if(currentStyle) {
    stylePieces = currentStyle.split(';');
}
stylePieces.push('new-style: true;');
currentElement.setAttribute('style', stylePieces.join(';'));
于 2012-11-13T08:29:40.073 回答
1

为什么不使用 jQuery 库并直接将新的 CSS 附加到 DOM 元素？

例如：

<script>
$(document).ready(function(){
    $("#an_element").css("border", "1px solid #333");
});
</script>

<div id="an_element">Test</a>

这将在 ID 为“an_element”的元素周围添加边框。

jQuery 选择器

jQuery CSS

于 2012-11-13T08:28:51.897 回答
0

如果您想将规则附加到现有样式表，官方的做法是使用 insertRule 方法。在浏览器上可能会比仅附加文本要容易得多。此外，如果你像下面那样做，如果有一个特定的 css 规则不是有效的语法，它会跳过它，从而保护你的文档的完整性。

仅将 jQuery 用于字符串计时，可能无论如何都不需要。

您必须给它样式标签的 ID。

function AddMoreStyles(code, styleTagId) {

    var sheet = document.getElementById('#' + styleTagId);

    let lines = code.replace(/[\r\n\t]/gm, ' ').split(/}/);
    if (!sheet) {
        return;
    }
    sheet = sheet.styleSheet || sheet.sheet || sheet;
    lines.forEach(function (str) {
        str = $.trim(str) + '}';
        let m = str.match(/(.+?)\{(.*?)}/), m1, m2;
        if (m) {
            m1 = $.trim(m[1]);
            m2 = $.trim(m[2]);
            try {
                if (sheet.insertRule) sheet.insertRule(m1 + '{' + m2 + '}', sheet.cssRules.length);
                else sheet.addRule(m1, m2);
            } catch (e) {
                console.log("!ERROR in css rule: " + e.message);
            }
        }
    });
};
于 2017-02-19T01:31:34.923 回答
0

添加到@AtheistP3ace的答案，这是一个使用纯 JavaScript 更改样式块内容的函数：

// Change the CSS in the style section.
// Property is the name of the class or id E.G. ".mdc-card" or "#main".
// Style is the name of the CSS style. E.G. "Background".
// Value is the setting that the style will use, E.G. "Red"
// WARNING: STOPS AND EXECUTES ON THE FIRST MATCH DOES NOT PROCESS MORE AFTER THAT!!!
function changeCSS(property, style, value, cssSectionID) {
    if (cssSectionID === undefined) {
        cssSectionID = "mainCSS";
    }
    // Get the current CSS sheet.
    var mainCSS = document.getElementById("mainCSS");
    var changeStatus = false;
    // Refine the stylesheet into a more easily processed form.
    // It is done here as making it part of the variable definition produces issues where you still need to call the sheet property.
    mainCSS = mainCSS.sheet;

    // Only execute if the user has specified values for each of the required parameters.
    if (property !== undefined && style !== undefined && value !== undefined) {
        // Loop through all of the CSS Properties until the specified property is found.
        for (var index = 0; index < mainCSS.cssRules.length; index++) {

            // Only apply the value of the property matches.
            if (mainCSS.cssRules[index].selectorText === property.toString()) {
                // Apply the specified property value to the.
                mainCSS.cssRules[index].style[style.toString()] = value.toString();

                // Sets the exit status and breaks the loop's execution.
                changeStatus = true;
                break;
            }
        }   
    }
    // Returns the result of the operation. True being successful and false being unsuccessful.
    return changeStatus;
}
于 2017-10-27T12:46:49.067 回答