<!DOCTYPE html>
<html>
<head>
<title>Changing CSS extern file using only JavaScript</title>
<link id="changeCSS" rel="stylesheet" type="text/css" href="positive.css"/>
<script type="text/javascript">
function changeCSS() {
var oldlink = document.getElementById("changeCSS");
var cssFile;
if(oldlink.getAttribute('href') === 'positive.css') {
cssFile = 'negative.css';
}
else {
cssFile = 'positive.css';
}
var newlink = document.createElement("link");
newlink.setAttribute("id", "changeCSS");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
</script>
</head>
<body>
<button onclick="changeCSS();">change</button>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</body>
</html>