使用jQuery获取样式标签内容?

4

问题

我正在尝试获取样式标签内的内容,但是无法让它正常工作。

代码功能

我使用 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>
4个回答

4

我认为您需要在ID中转义冒号字符,因为它通常会在CSS选择器语法中有特殊含义。请参考如何在CSS选择器中处理元素ID中的冒号以了解这个问题的讨论。

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

我个人避免在ID或类值中使用具有CSS选择器含义的特殊字符,以避免出现这种复杂情况。


这个在使用 sizzle 引擎的旧版浏览器中也能工作吗?因为它们可能没有像现代浏览器内部查询选择器一样严格地实现规范。 - Esailija
这是CSS规范的一部分,并且已经存在很长时间,因此应该可以工作,但我的建议是让OP从ID值中删除冒号。如果您想确定它是否适用于特定的Sizzle版本,则需要进行测试,但应该可以。 - jfriend00
好的,谢谢!我没有自己添加冒号,这是由LESS语言(http://lesscss.org/)生成的。 - Jens Törnell

3

尝试:

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

3
id 是 jQuery 中的一个伪选择器,尝试一下。
var elm = document.getElementById("less:concepts-less-css-style"),
    content = elm.innerHTML || elm.innerText || elm.textContent;

    alert( content );

您当然可以更改id,使其不那么随意,这样jQuery就能正常工作。


1
@JensTörnell,请仔细阅读答案,你就会明白的 ;) - Esailija

0
请使用属性选择器。
  var test = $('style[id="'+my_id+'"]').text();
    //or
  var test2 = $('style[id="less:concepts-less-css-style"]').html();

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接