2011-11-18 4 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

Я думаю, вам нужно избежать символа двоеточия в вашем идентификаторе, потому что это обычно означает что-то в синтаксисе селектора. См. Handling a colon in an element ID in a CSS selector для обсуждения этой проблемы.

Я лично избегаю специальных символов с использованием селектора CSS в значениях моего идентификатора или класса, чтобы избежать этого осложнения.

+0

Будет ли это работать и в старых браузерах, где jQuery использует движок sizzle? Потому что возможно, что они не реализуют спецификацию так же, как внутренний селектор запросов современного браузера. – Esailija

+0

Это часть спецификации CSS и долгое время работало, но я рекомендую OP удалить двоеточия из значений идентификатора. Вам нужно будет проверить конкретную версию Sizzle, если вы хотите точно знать, работает ли это там, но это должно быть. – jfriend00

+0

Это сработало, спасибо !. Я сам не добавлял двоеточие, он генерируется языком LESS (http://lesscss.org/). –

3

Ид так, что 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(); 
Смежные вопросы