Question

按内部风格我的意思是

＆＃xA;＆＃xA;

 ＆lt; style＆gt;＆＃xA; #div＆＃xA; {color：red;}＆＃xA;＆lt; ; / style＆gt;＆＃xA;

＆＃xA;＆＃xA;

document.getElementsByTagName（'style'）。innerHTML无效... document.styleSheets。

＆＃XA;

Answer 1

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';
    }    
}

Answer 2

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

document.styleSheets [0] .rules

这又是一个数组。所以迭代。可以按如下方式提取每个规则的规则文本

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

document.styleSheets [0] .rules [0] .cssText为第一个样式元素中定义的第一个规则提供规则文本

Answer 3

<!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/

Answer 4

使用jquery使用此

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

使用javascript

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

var y = x.firstChild.innerHTML;

Answer 5

啊，我真是太蠢了..

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

@ Jag，@ ABHIJITH GM，@ mediaguru，@ hardik的所有答案都是正确的。

谢谢你们！抱歉这个新手问题......整日编码，我的眼睛受伤了，咖啡时间。

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

5 个答案: