style property. On their own, these methods are all fairly reliable, but they don’t play too nicely together.
- External styles are on another page, and are included.
- Embedded styles override external styles.
- Inline styles override both embedded and external styles.
Making Them Work Together
Load the page with a stylesheet that has a blue background:
<link rel="stylesheet" href="/test/blue.css" type="text/css" id="ss" />
el = document.getElementById('pageBody'); el.style.backgroundColor = 'red';
Page background is now red. Lastly, we’ll switch stylesheets to one with a green background.
document.getElementById('ss').href = '/test/green.css';
el = document.getElementById('pageBody'); el.removeAttribute('style');
And in Safari:
el = document.getElementById('pageBody'); el.style.backgroundColor = null;