Question

我有这个javascript代码来增加和减少div的高度。 onclick事件div文本上的函数调用更改为“click to minimize”，如果再次单击，则会更改为“click to read”。我想在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";
}

<强> Working Fiddle

Answer 3

我建议在你的CSS中使用两个不同的类（或标准按钮和一个额外的类），只需要一个中心点来定义你的背景图像。

之类的东西

button {
  background-image: url();
}

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

然后修改你的js，这样就可以切换这些项目上的类。使用jQuery非常简单

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

但标准JS版本当然也是可能的。他们只需要一些if-else子句来询问该类是否存在。

在javascript中更改CSS类的背景图像

3 个答案: