为什么不是我的背景改变颜色的按钮?
问题描述:
我试图改变按钮本身被点击时正文和按钮的颜色。为什么不是我的背景改变颜色的按钮?
现在,页面的主体随机变色。但是,这不适用于按钮本身。
任何想法?
这是我的按钮CSS:
#loadQuote {
position: fixed;
width: 12em;
display: inline-block;
left: 50%;
margin-left: -6em;
bottom: 150px;
border-radius: 4px;
border: 2px solid #fff;
color: #fff;
background-color: #36b55c;
padding: 15px 0;
transition: .5s ;
}
#loadQuote:hover {
background-color: rgba(255,255,255,.25);
}
#loadQuote:focus {
outline: none;
}
这是我的JavaScript:
// prints quote
function printQuote(){
var finalQuote = buildQuote();
document.getElementById('quote-box').innerHTML = finalQuote;
var color = '#'+Math.floor(Math.random()*16777215).toString(16);
document.body.style.background = color;
document.loadQuote.style.backgroundColor = color;
}
谢谢
答
你的元素选择不正确。使用document.getElementById
选择元素。
// prints quote
function printQuote(){
var finalQuote = buildQuote();
document.getElementById('quote-box').innerHTML = finalQuote;
var color = '#'+Math.floor(Math.random()*16777215).toString(16);
document.body.style.background = color;
//BELOW LINE IS THE CHANGED CODE
document.getElementById('loadQuote').style.backgroundColor = color;
}
答
你必须要在这一行的一个问题:
document.loadQuote.style.backgroundColor = color;
;
基本上loadQuote
不是document
中的对象。
相反,你需要使用document.getElementById()
等来选择一个DOM元素:
document.getElementById('loadQuote'); // if you have a DOM element with ID loadQuote
或者使用Document.querySelector()
传递一个CSS选择器,只是一个例子:在document.querySelector()
document.querySelector('.loadQuote'); // if you DOM element has .loadQuote appplied
更多信息可以在这里找到:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
其中是HTML? – Derek
添加您的html代码 –