Chrome：动态创建的 <style> 标签没有内容？答案

【问题标题】：Chrome: Dynamically created <style> tag does not have content?Chrome：动态创建的 <style> 标签没有内容？
【发布时间】：2011-02-15 09:49:18
【问题描述】：

我在尝试编写跨浏览器脚本时遇到了一个奇怪的问题。基本上我的标题是这样的

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

然后在body标签中：

<p id="hey">Hey</p>
<input type="button" value="attachStyle" name="attachStyle" onclick="attachStyle();"></input>
<script>
function attachStyle() {
  var strVar="";
  strVar += "<style type='text\/css'>#hey {border:5px   solid   red;}<\/script>";
  $("head").append(strVar);
}
</script>

该按钮在 Firefox 中有效，但在 Chrome 中无效。当我在开发者工具中查看 html DOM 元素时，样式标签被插入但没有内容，像这样：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type='text/css'></script>
</head>

我很好奇这是什么原因造成的？以及如何以跨浏览器的方式创建 CSS 样式？谢谢！

【问题讨论】：

标签： javascript css dom google-chrome

【解决方案1】：

<style type='text/css'></script>

你从一个“style”标签开始，用“script”结束它。标签错误！ :P

【讨论】：

天哪...想想我花了 20 分钟试图找出问题所在，制作一个新的 html 文件，对其进行测试，然后格式化代码并发布，却没有意识到这一点。我现在觉得自己好傻。但感谢指出。我拥有。 =]我投票结束这个问题。还是我应该删除它？
保留它，它会告诉其他搜索的人，有时你只需要仔细阅读你的代码:)