Question

我正在尝试创建一个带有按钮的页面，这些按钮将改变页面的颜色方案。我已经有很多工作，你可以在这里查看https://jsfiddle.net/v0jx4wdz/。但是我似乎无法在onmouseover上悬停工作。我仍然希望能够设置按钮和对焦区域的样式。我一整天都在寻找Javascript的解决方案，但一直都没有运气。

编辑：为了澄清，我不希望将onmouseover函数用作将样式更改为页面的方法。我希望改变风格，并按下标有＆＃34; Button＆＃34;有一个onmouseover改变。一开始它有两种蓝色。但我希望能够有其他2种颜色。

我试过了

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

点击此处更新此网址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用于＆＃34; onmouseover＆＃34;

Answer 3

我已经找到了答案，觉得分享可能会很好。我找不到答案，因为我发现它是由一个名为Karthik的用户发布的here。

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，现在正在工作。单击红色圆圈，而不是将鼠标悬停在页面上的按钮上。

只需使用Javascript，我可以更改悬停和焦点样式的样式吗？

3 个答案: