Question

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

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

但它无效

Answer 1

您可能正在尝试将css添加到样式标记中。这可以通过以下方式完成：

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

您也可以使用：

document.styleSheets[0].cssText = ""; //some css goes here

Answer 2

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

如果您为样式标记提供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

表格中的所有课程。

希望这有助于某人！

Answer 3

style是一个属性。在getElementById()之后，您可以更改其style。

HTML：

<div id='myDiv'>...</div>

JS：

var div = document.getElementById('myDiv')

div.style.background = 'red';
div.style.margin = "10px";
div.style.fontSize = "12px";

等

Answer 4

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

document.getElementById('foo').innerHTML += styleContents;

Answer 5

我在http://jsfiddle.net/fttS5/1/上拼凑了一个简短的例子。

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

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

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

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

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

你也可以使用我的下面列出的innerHTML方法。

Answer 6

试试这个

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(';'));

Answer 7

为什么不使用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 Selectors

jQuery CSS

Answer 8

如果要将规则附加到现有样式表，正式的方法是使用insertRule方法。浏览器可能会更容易，只需添加文本即可。此外，如果你这样做，如果有一个特定的CSS规则是无效的语法，它将跳过它，从而保护文档的完整性。

使用jQuery只是为了字符串调整，可能不需要。

您必须为其指定样式标记的ID。

var f1DataSet = f1.DataSet;

Answer 9

添加到@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;
}

如何使用JavaScript动态更改样式标记？

9 个答案: