Chrome: Dynamically created <style> tag does not have content?
- by Shizhidi
Hello. I encountered a weird problem when trying to write a cross-browser script. Basically my header looks like this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
Then in the body tag:
<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>
The button works in Firefox, but not in Chrome. When I looked at the html DOM elements in the developer tool, the style tag was inserted but without content, like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type='text/css'></script>
</head>
I'm curious as to what causes this? And how to create CSS style in a way that is cross-browser? Thanks!
