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

我使用此javascript代码来增加和减少div的高度。对

onclick

event div text的函数调用将更改为“单击以最小化”，如果再次单击，将更改为“单击以读取”。 我想更改

按钮

类中的背景图像而不是文本

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;
}

---

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

button {
  background-image: url();
}

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

然后修改js，这样它就可以在这些项目上切换类。使用jQuery这很容易

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

---

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

为什么不使用与

#content

元素相同的方法呢

CSS:

JS:

函数chk（）
{
var node=document.getElementById（'content'）；
node.classList.toggle（'expand'）；
var buttons=document.getElementsByClassName（'button'）；
对于（var i=0；iHTML

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

JS

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

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";
}

您是否有可能发布一个或一个示例，以便我们能够帮助解决问题？您能否告诉我，我是否希望将content div设置为类，然后使其工作相同？当然，您必须在CSS中添加两个不同的URL，如果您想使用我的代码，还必须包含jQuery…是否引发了任何错误？
.content {
    height:50px;
    width: 50px;
    background-color:red;
}
.content.expand {
    height:150px;
}

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";
}