Question

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

<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样式？谢谢！

Answer 1

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

您首先使用“样式”标记，然后使用“脚本”将其关闭。错误的标签！：P

Chrome：动态创建的<style>标记没有内容？</style>

1 个答案: