只有JavaScript，我可以改变悬停和聚焦样式的样式

Question

我正在尝试制作一个页面，该页面将更改页面的配色方案。我可以在此处查看https://jsfiddle.net/v0jx4wdz/。但是，我似乎没有任何事情可以为悬停在杂乱无章的情况下工作。我希望仍然能够设置按钮和聚焦区域。我一直在整天在JavaScript中寻找解决方案，但根本没有运气。

编辑：要澄清，我不希望将onmouseover函数用作使样式更改页面的方式。我希望发生样式更改，并且标记为"按钮"的按钮具有零用的更改。一开始是蓝色的两种阴影。但是我希望能够拥有另外两种颜色。

我尝试了

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

但是，当添加到整个代码中时，一切都会崩溃。

这是我一直在使用的。

<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> 

我什至尝试使用QuerySelectorall玩耍，但这似乎根本没有起作用。

如果有人知道要实现这一目标，那真的很酷。拜托，只是javascript，没有jQuery。

Answer 1

检查此URL https://jsfiddle.net/waves7/1wlrndw2/1/在此处更新或只是添加

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

将在鼠标上使用

Answer 2

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';
}
}

使用此JS进行" onMouseover"

Answer 3

我发现了答案，并认为分享可能很好。我不会为答案而荣誉，因为我在这里发现了一个名为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);

这是我现在正在工作的另一个JSFIDDLE。单击红色圆圈，而不是悬停在页面上的按钮上。