在JavaScript中更改CSS類的背景圖片

Question

我有這個JavaScript代碼來增加和減少div的高度。 函數對onclick事件div文本的調用將更改為“單擊以最小化”，如果再次單擊，它將更改為“單擊以閱讀”。 我想更改背景圖像而不是button類中的文本。

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
    document.getElementByClass('button').style.backgroundImage = node.classList.contains('expand')? 'click to minimize':'click to read';
}

這是CSS

.content
{
    height:auto;
}

.content.expand
{
    height:150px;
}

Answer 1

為什么不使用與#content元素相同的方法。

CSS：

.button {
    background-image: url(xxx.png);
}
.button.alt {
    background-image: url(yyy.png);
}

JS：

function chk()
{
    var node = document.getElementById('content');
    node.classList.toggle('expand');

    var buttons = document.getElementsByClassName('button');
    for(var i=0;i<buttons.length;i++){
       buttons[i].classList.toggle('alt');
    }    
}

Answer 2

的HTML

<div class="content"></div>
<button onclick="chk(this)">click to read</button>

的CSS

.content {
    height:50px;
    width: 50px;
    background-color:red;
}
.content.expand {
    height:150px;
}

JS

function chk(e) {
    var node = document.getElementsByClassName('content')[0];
    e.innerHTML = node.className.indexOf('expand') > -1 ?'click to read': 'click to minimize';
    node.className = node.className.indexOf('expand') > -1 ? "content" : "content expand";
}

工作小提琴

Answer 3

我建議在CSS中使用兩個不同的類（或標准按鈕和一個額外的類），只是為了用一個中心點定義您的背景圖像。 就像是

button {
  background-image: url();
}

button.active {
  background-image: url();
}

然后修改您的js，以便只在這些項目上切換類。 使用jQuery，這非常簡單

$('button').click(function(){$(this).toggleClass('active')});

但當然也可以使用標准JS版本。 他們只需要一些if-else子句，詢問該類是否存在。