<!DOCTYPE html>
<html>
<head>
<title>css injection | xero.nu</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
body{
font: normal 12pt "Times New Roman", serif;
background: #ccc;
color: #000066;
}
a, a:visited {
color: #0000ff;
}
</style>
</head>
<body>
<h1>css injection</h1>
<p>hello world! this is <a href="http://xero.nu/">xero</a>!</p>
<p>click the button below and inject new css styles into the page via javascript!</p>
<p><input type="button" value=" inject! " onclick="test()" />
<script type="text/javascript">
function test() {
/* calling body append will add your new styles to the bottom of the page and override any existing ones */
$('head').append('<style type="text/css">body{font:normal 14pt Arial, Helvetica, sans-serif;background:#000;color:#fff}a,a:visited{color:#ccc;text-decoration:none;border-bottom:1px solid #00ff00}a:hover{color:#00ff00;border-color:#ccc}</style>');
}
</script>
</body>
</html>