2011-11-18 58 views
2

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

我试图获取内容的样式标签内但我不能让它正常工作的问题。

的代码做什么

我使用jQuery,并尝试获取其风格与内容的文本()和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

我认为你必须在你的ID中冒号冒号,因为它通常意味着选择器语法中的某些东西。有关此问题的讨论,请参见Handling a colon in an element ID in a CSS selector

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

我个人避免与CSS选择器的特殊字符在我的ID或类值意味着避免这种并发症。

+0

这也适用于jQuery使用sizzle引擎的旧浏览器吗?因为它们可能不像现代浏览器的内部查询选择器那样严格地实现规范。 – Esailija

+0

它是CSS规范的一部分,并且已经很长时间了,所以它应该可以工作,但我的建议是让OP从ID值中移除冒号。你必须测试一个特定的Sizzle版本,如果你想确定它是否在那里工作,但它应该。 – jfriend00

+0

工作,谢谢!我没有自己添加冒号,它是由LESS语言(http://lesscss.org/)生成的。 –

1

尝试:

$('#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将工作。

+0

这不是jQuery的,但它的工作。谢谢! –

+1

@JensTörnell,更仔细地阅读答案,你会明白;) – Esailija

0

使用属性的选择,而不是

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