Я столкнулся со странной проблемой при попытке написать кросс-браузерный скрипт. В основном мой заголовок выглядит так
<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 таким образом, чтобы он был кросс-браузерным? Спасибо!