使用 jQuery 获取样式标签内容？答案

【问题标题】：Get style tag content with jQuery?使用 jQuery 获取样式标签内容？
【发布时间】：2012-01-01 14:53:13
【问题描述】：

问题

我正在尝试在样式标签中获取内容，但无法正常工作。

代码的作用

我使用 jQuery 并尝试使用 text() 和 html() 获取样式内容。它不起作用。

我的代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet/less" type="text/css" href="css/style.less">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>

    <style id="less:concepts-less-css-style" media="screen" type="text/css">
        body {
            padding: 10px;
            background: blue;
        }
    </style>

</head>
<body>
<script src="js/less-1.1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
        jQuery(document).ready(function($) {        
            var my_id = $('style').attr('id');
            var test = $('#less:concepts-less-css-style').text();
            var test2 = $('#less:concepts-less-css-style').html();
            alert(test + "#" + test2 + "#" + my_id);
        });
    </script>
</body>
</html>

【问题讨论】：

标签： jquery

【解决方案1】：

改用属性选择器

  var test = $('style[id="'+my_id+'"]').text();
    //or
  var test2 = $('style[id="less:concepts-less-css-style"]').html();

【讨论】：

【解决方案2】：

我认为您必须对 ID 中的冒号字符进行转义，因为它通常意味着选择器语法中的某些内容。有关此问题的讨论，请参阅 Handling a colon in an element ID in a CSS selector。

$('#less\\:concepts-less-css-style')

我个人避免在我的 ID 或类值中包含 CSS 选择器含义的特殊字符，以避免这种复杂性。

【讨论】：

这是否也适用于 jQuery 使用 Sizzle 引擎的旧浏览器？因为他们可能没有像现代浏览器的内部查询选择器那样紧密地实现规范。
它是 CSS 规范的一部分，并且已经存在了很长时间，所以它应该可以工作，但我的建议是让 OP 从 ID 值中删除冒号。如果您想确定这是否适用，您必须测试特定的 Sizzle 版本，但它应该。
成功了，谢谢！。冒号不是我自己加的，是LESS语言生成的（lesscss.org）。

【解决方案3】：

id 让 jQuery 认为它是一个伪选择器.. 尝试

var elm = document.getElementById("less:concepts-less-css-style"),
    content = elm.innerHTML || elm.innerText || elm.textContent;

    alert( content );

您当然可以将 id 更改为不那么不稳定，并且 jQuery 可以正常工作。

【讨论】：

@JensTörnell，仔细阅读答案，你就会明白；）

【解决方案4】：

试试：

$('#less:concepts-less-css-style')[0].innerHTML

【讨论】：