Using CSS with Javascript

A demo of how to use CSS dynamically with JavaScript.

by Mike Cunneen

HTML

<button id="makered">Red text</button>
<button id="makeblue">Blue text</button>
<textarea id="newtxtid" name="ta" wrap="hard" spellcheck="false">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras varius. Etiam ut purus mattis mauris sodales aliquam. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Ut varius tincidunt libero.</textarea>

CSS

textarea.red {
    color: #F00;
}
textarea.blue {
    color: #00F;
}
textarea {
    border: 5px solid #eeeeee;
    margin-top:20px;
    width: 90%;
    min-height: 10em;
    box-sizing: border-box;
}
textarea:hover {
    border: 5px solid pink;
}
textarea:focus {
    border: 5px solid red;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    var makered, makeblue, textarea;

    makered = document.querySelector('#makered');
    makeblue = document.querySelector('#makeblue');
    textarea = document.querySelector('#newtxtid');

    makered.onclick = function () {
        textarea.className = 'red';
    };

    makeblue.onclick = function () {
        textarea.className = 'blue';
    };
});