<head>内のスクリプト
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var css = $('textarea').val();
//When the page loads we make whatever is in the textarea become the CSS
$('style').text($('textarea').val());
//When textarea is typed in put it in style.
//we use keydown as it gives a "live" effect, however you can use any event
$('textarea').keyup(function(){
$('style').text($('textarea').val());
});
});
</script>
<body>内のスクリプト
<textarea cols="40" rows="20">
body{
background-color: orange;
width: 300px;
margin: auto;
}
textarea{
float: left;
}
img{
float: right;
}
h1{
font-family: "Arial Black";
}
</textarea>
<h1>Some elements to play with...</h1>
<img src="http://www.google.co.uk/logos/galileo09.gif" alt="" />
批評
かなり面白いjqueryだと思います。
リアルタイムで動作させることができるので、
CSSの勉強などにも利用できそうです。
ただし、このスクリプトはIEで動作しませんｗ
ご注意を!!
参考URL
>>http://www.devwords.com/live-css-editing-with-jquery/