js functions that require css

TextContentVsInnerText.js

//***********************************
// TextContent vs innerText
//***********************************

// Innertext returns with a line breaks in it because it behaves like you'd copy and pasted the element, and becasue div is block level it put "World" on a new line. innerText is styles dependant, so will therefore have to check the style sheet 
var div = document.createElement('div');
div.style.background = 'url(img.png)';
div.innerHTML = "hello <div>world</div>";
document.body.appendChild(div);

div.textContent;
// "Hello world"

div.innerText;
// "hello
// World"

document.body.removeChild(div);

/*
Documents the behaviour of internext explorer, chrome and safari but not firefox becasuse firefox doesnt support innertext, it will return an undefined.

Browser put off checking syles till the very end and therefore using innertext would force the browser to start parsing css early
clientHeight, clientLeft, clientTop, clientWidth, getBouncingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines, scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth, width, height, getComputedStyle(), scrollBy(), scrollTo, scrollX, scrollY

If you understand this you can do some clever hackery,
if you ignore this issue you will end up with strange performance issues
//http://www.youtube.com/watch?v=ly9Sj2GPO1w


*/