繁体   English   中英

为什么按钮的背景没有改变颜色?

[英]Why isn't my background for the button changing color?

单击按钮本身时,我试图更改按钮主体和按钮的颜色。

现在,页面的主体会随机更改颜色。 但是,这不适用于按钮本身。

有任何想法吗?

这是按钮的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

或使用传递CSS选择器的Document.querySelector()只是一个示例:

document.querySelector('.loadQuote'); // if you DOM element has .loadQuote appplied

有关document.querySelector()更多信息,可以在这里找到:

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM