为什么不是我的背景改变颜色的按钮？

现在，页面的主体随机变色。但是，这不适用于按钮本身。

任何想法？

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

谢谢

来源

2016-08-18 gloopit

其中是HTML？ – Derek

添加您的html代码 –

你的元素选择不正确。使用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; 
}

来源

2016-08-18 05:06:51 z0mBi3

你必须要在这一行的一个问题：

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

来源

2016-08-18 06:11:04 GibboK

为什么不是我的背景改变颜色的按钮？

回答

相关问题