JS - 如何获取内部样式元素的内容(<style>...</style)



由内部样式我的意思

<style>
#div
{color:red;}
</style>

document.getElementsbytagname('style')。innerhtml不起作用... document.StylesHeets。

document.getElementsByTagName 返回元素的数组

因此,您需要使用index

访问它
document.getElementsByTagName('style')[0].innerHTML

document.styleSheets 如果要获得特定的选择器或从样式表中修改某些内容,则非常有用

示例

var styleSheet = document.styleSheets[1]; 
// assuming second one is embedded style, 
// since document.styleSheets also shows linked style sheets (like <link heref=".. >)
for (var i = 0; i < styleSheet.rules.length; i++) {
    // if you are looking for selector '.main'
    if (styleSheet.rules[i].selectorText === '.main') {
        // get background color
        var oldBg = styleSheet.rules[i].style.backgroundColor;
        // set background color
        styleSheet.rules[i].style.backgroundColor = '#ddd';
    }    
}

document.styleSheets是一个数组,对于页面中的每个样式定义。为每个样式元素迭代并找到定义的规则。

document.styleSheets[0].rules

这再次是一个数组。所以迭代。每个规则的规则文本都可以如下提取

document.styleSheets[indexofstyleelement].rules[indexofrule].cssText

document.styleSheets[0].rules[0].cssText给出了第一个样式元素内定义的第一个规则的规则文本

<!DOCTYPE html>
<html>
<head>
<style>
  #div {
    color: red;
  }
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = document.getElementsByTagName("STYLE")[1];
    document.getElementById("demo").innerHTML = x.innerHTML;
  }
</script>
</body>
</html>

https://jsfiddle.net/mediaguru/xt9mkncx/

使用jQuery使用此

var x = $('style').html();

使用JavaScript

var x=document.getElementById("home");

var y = x.firstChild.innerHTML;

啊,我很愚蠢..

for (var i = 0; i < styles_length; i++)
{// I had:
// styles.innerHTML;
// not correct:
styles[i].innerHTML;
}

@jag,@abhijith gm,@mediaguru,@hardik的所有答案是正确的。

谢谢你们!抱歉,这个新手的问题...整日编码,我的眼睛正在伤害,咖啡时间。

相关内容

最新更新