DOM Enlightenment Book

by phshao

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div></div>






































<h4 style="border-top:1px solid #ADADAD;padding-top:20px;margin-top:20px;"><strong>&larr; Code Example from <a href="http://www.domenlightenment.com/" target="_blank">DOM Enlightenment Book</a> by <a href="http://www.codylindley.com" target="_blank">Cody Lindley</a></strong></h4>

<p style="background-color:#fff">JavaScript code is executed on page load. Click the "Run" button in the top bar to re-run the JavaScript code. All <code>console.log()'s</code> are logged to the <a href="http://getfirebug.com/firebuglite" target="_blank">Firebug Lite</a> console below &darr;.</p>

JavaScript

var div = document.querySelector('div');
var divStyle = div.style;
console.log(div.toString());
console.log(div.style.toString());
//set using cssText
divStyle.cssText = 'background-color:red;border:1px solid black;height:100px;width:100px;';
//get using cssText
console.log(divStyle.cssText);
//remove
divStyle.cssText = null;
console.log(divStyle.cssText);
//exactly that same outcome using setAttribute() and getAttribute()

//set using setAttribute
div.setAttribute('style','background-color:red;border:1px solid black;height:100px;width:100px;');
//get using getAttribute
console.log(div.getAttribute('style'));
//remove
div.setAttribute('style','');