With just Javascript can I change style of hover and focus styles?

Question

I am trying to make a page with buttons that will change the color scheme of the page. I have gotten much of it working, as you can view here https://jsfiddle.net/v0jx4wdz/. However I can not seem to get anything to work for hover on onmouseover. I would like to still be able to style the buttons and focus area. I have been looking for a solution in just Javascript for this all day, but have had no luck at all.

EDIT: To clarify, I am not looking to have an onmouseover function used as a way to make the style change to the page. I am looking to have the style change take place, and the buttons labeled "Button" have an onmouseover change. At the start it's two shades of blue. But I would like to be able to have it be 2 other colors.

I have tried

var formArea = document.getElementByClassName("formArea").onclick = 
function() {
this.style.borderColor = "black";
}

But when added to the whole code, it all falls apart.

Here's what I have been working with.

<style>

body {
background-color: #ec7c23;
}
.btn-group button {
background-color: #577CC1; 
border: 1px #577CC1; 
color: white; 
padding: 10px 24px; 
cursor: pointer; 
float: left; 
font-weight: bold;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #2C3E60;
}



textarea[type="textarea"] {
width: ;
padding: 5px 10px;
margin: 5px 0;
box-sizing: border-box;
font-family: arial;
font-weight: bold;  
border: 10px;
background-color: #F4F6FA;
color: darkblue; 
border: 4px solid #577CC1;
border-radius: 4px;
}
textarea[type="textarea"]:focus {
border: 4px solid #e66026;
}


h1 {
line-height: 1.25;
margin: 2em 0 0;
}
p {
margin: .5em 0;
}
#switcher {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#switcher li {
float: left;
width: 30px;
height: 30px;
margin: 0 15px 15px 0;
border-radius: 30px;
border: 3px solid black;
}
#blackButton {
background: grey;
}
#orangeButton {
background: #ec7c23;
}
</style>

HTML

<textarea type="textarea" class="formArea" name="output" 
onclick="this.focus();this.select()" 
id="output" cols="70" rows="25" placeholder="Some text"></textarea>
<br>
<div class="btn-group">
<button value="Combine" class="buttonGroup" onclick="convert()" 
id="combine1">
    Button
</button><br><br>
</div>
<br>
<textarea type="textarea" class="formArea" name="output" 
onclick="this.focus();this.select()" 
id="output" cols="70" rows="5" placeholder="Some text"></textarea>
<br>
<div class="btn-group">
<button value="Combine" class="buttonGroup" onclick="convert()" 
id="combine1">
    Button
</button><br><br>
</div>
<br>
<ul id="switcher">
<li id="blackButton"></li>
<li id="orangeButton"></li>
</ul>

javascript

<script>

document.getElementById('blackButton').onclick = switchBlack;
document.getElementById('orangeButton').onclick = switchOrange;


function switchBlack() {


var textareafocus = document.querySelectorAll('textareafocus')
for(var i = 0; i < body.length; i++) {
body[i].style.backgroundColor = "grey";
}

var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = 'white';
body[i].style.backgroundColor = "grey";
body[i].style.fontFamily = 'terminal';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'black';
formArea[i].style.borderColor = 'white';
formArea[i].style.color = 'white';
formArea[i].style.fontFamily = 'terminal';
var formArea = document.getElementByClassName("formArea").onclick = 
function() {
this.style.borderColor = "black";
}   
}
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = 'white';
buttonGroup[i].style.color = 'black';
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseover 
= function() {
this.style.backgroundColor = "orange";
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseout = 
function() {
this.style.backgroundColor = "white";
}
}



function switchOrange() {

var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = '#2C3E60';
body[i].style.backgroundColor = "#ec7c23";
body[i].style.fontFamily = 'arial';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'lightblue';
formArea[i].style.borderColor = '#577CC1';
formArea[i].style.color = 'darkblue';
formArea[i].style.fontFamily = 'arial';  
var formArea = document.getElementByClassName("formArea").onclick = 
function() {
this.style.borderColor = "orange";
}
}   
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = '#577CC1';
buttonGroup[i].style.color = 'white';
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseover 
= function() {
this.style.backgroundColor = "blue";
}
var buttonGroup = document.getElementByClassName("buttonGroup").onmouseout = 
function() {
this.style.backgroundColor = "white";
}
}
</script>

I even tried playing around with querySelectorAll, but that didn't seem to work at all.

If someone knows anyway to pull this off, that would be really cool. Please, just javascript, no JQuery.

CSS is already set, I wan't to to be able to hit a button on the page to change to a different color scheme. — Ty H, Sep 04 '17 at 09:00
@TyH: That should be a matter of adding/removing a class on `document.body`. All the rest should be handled by the CSS. — T.J. Crowder, Sep 04 '17 at 09:02
It would be much cleaner if you would change / add a CSS class programmatically rather than hard code the styles with JavaScript. So instead of adding styles with JavaScript (e.g. style.color), I would just create new CSS classes in your 'CSS definitions' and add the CSS class (e.g. 'blackWithWhiteBackground') to the element. Your fiddle is not fully functional, as you didn't provide a 'convert' function. — Patte, Sep 04 '17 at 09:05
@Patte How do I do that? I don't know CSS that well. Also on the jfiddle, clicking the little circles will convert the colors. — Ty H, Sep 04 '17 at 09:09

score 0 · Answer 1 · answered Sep 04 '17 at 09:10

0

check this url https://jsfiddle.net/waves7/1wLrndw2/1/ updated here or just add

 document.getElementById('orangeButton').onmouseover = switchOrange;
 document.getElementById('blackButton').onmouseover = switchBlack;

will work on mouse over

answered Sep 04 '17 at 09:10

Tarang Rathod

86
9

score 0 · Answer 2 · answered Sep 04 '17 at 09:11

document.getElementById("blackButton").onmouseover = switchBlack;
document.getElementById("orangeButton").onmouseover = switchOrange;

function switchBlack() {
var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = 'white';
body[i].style.backgroundColor = "grey";
body[i].style.fontFamily = 'terminal';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'black';
formArea[i].style.borderColor = 'white';
formArea[i].style.color = 'white';
formArea[i].style.fontFamily = 'terminal';
}  
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = 'white';
buttonGroup[i].style.color = 'black';
}
}

function switchOrange() {
var body = document.getElementsByTagName('body')
for(var i = 0; i < body.length; i++) {
body[i].style.color = '#2C3E60';
body[i].style.backgroundColor = "#ec7c23";
body[i].style.fontFamily = 'arial';
}
var formArea = document.getElementsByClassName('formArea')
for(var i = 0; i < formArea.length; i++) {
formArea[i].style.backgroundColor = 'lightblue';
formArea[i].style.borderColor = '#577CC1';
formArea[i].style.color = 'darkblue';
formArea[i].style.fontFamily = 'arial';  
}   
var buttonGroup = document.getElementsByClassName('buttonGroup')
for(var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].style.backgroundColor = '#577CC1';
buttonGroup[i].style.color = 'white';
}
}

Use this js for "onmouseover"

I guess I should have been more clear. I am not trying to make the color change happen as an onmouseover of the little color change buttons. I am trying to make a style change to the actual buttons, the ones called "Button" so at the start it's 2 different shades of blue. But after changing the style could be says 2 shades of red or any other colors. — Ty H, Sep 04 '17 at 09:17

Ty H · Accepted Answer · 2017-09-06T09:54:24.017

I have discovered the answer to this, and felt it might be good to share. I won't take the credit for the answer as I found it here posted by a used named Karthik.

var styleTag=document.createElement('style');
if (styleTag.styleSheet)
styleTag.styleSheet.cssText=styles;
else 
styleTag.appendChild(document.createTextNode(styles));

document.getElementsByTagName('head')[0].appendChild(styleTag);

Here is another JSFiddle of what I was trying to do, now working. Click the red circle, than hover over the buttons on the page.

With just Javascript can I change style of hover and focus styles?

3 Answers3