cssom
Version:
CSS Object Model implementation and CSS parser
100 lines (94 loc) • 2.07 kB
HTML
<style type="text/css">
html, body {
background: #CCC;
font-size: 14px;
margin: 0;
height: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
width: 50%;
padding: 0;
vertical-align: top;
}
#output, #style {
width: 49%;
min-height: 99%;
display: inline-block;
vertical-align: top;
}
#style {
position: absolute;
top: 0;
height: 100%;
left: 4px;
width: 49%;
background: #FFF;
border: 1px solid #999;
font: 14px monospace;
white-space: pre-wrap;
}
#output {
position: absolute;
top: 0;
min-height: 100%;
right: 0;
width: 50%;
margin: 0;
padding: 4px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
background: #333;
}
.rule {
color: #8CB7D1;
}
.name {
color: #D7AA69;
}
.value {
color: #D7AA69;
}
.brace-open, .brace-close, .colon, .semicolon {
color: #625035;
}
/*@import url("test/fixtures/dummy.css") screen, handheld;*/
@media screen, all {
body {
color: black;
}
}
</style>
<textarea id="style">.rule {
display: block;
}
.properties {
display: block;
}</textarea>
<pre id="output"></pre>
<script type="text/javascript" src="lib/StyleSheet.js"></script>
<script type="text/javascript" src="lib/CSSStyleSheet.js"></script>
<script type="text/javascript" src="lib/MediaList.js"></script>
<script type="text/javascript" src="lib/CSSRule.js"></script>
<script type="text/javascript" src="lib/CSSStyleRule.js"></script>
<script type="text/javascript" src="lib/CSSMediaRule.js"></script>
<script type="text/javascript" src="lib/CSSStyleDeclaration.js"></script>
<script type="text/javascript" src="lib/parse.js"></script>
<script type="text/javascript" src="lib/parse.js"></script>
<script type="text/javascript" src="plugins/toHTML.js"></script>
<script type="text/javascript">
CSSStyleSheet.prototype.toHTML = toHTML;
window.onload = function(){
var style = document.getElementById("style");
var output = document.getElementById("output")
function outputUpdated(){
output.innerHTML = parse(style.value).toHTML();
}
style.onkeyup = outputUpdated;
outputUpdated();
}
</script>