不使用jq 只用JavaScript 怎么给所有指定div 添加新的 class

plaodj

已有div 如下

[JavaScript] 纯文本查看 复制代码

<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" /></div>

假设 /image/sfbs.png 不存在  则执行 nofind()； 方法

<script type="text/javascript">
<!--
function nofind(){
        var div = document.getElementsByClassName("sfbspic");
        var i;
    for (i=0;i<div.length;i++ )
    {
                ？？？？？？
    }
}
//-->
</script>

添加一个新的 class：nosfbspic   使得最后的指定含有 class="sfbspic" 的 所有div  成这样

[JavaScript] 纯文本查看 复制代码

<div class="sfbspic nosfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" /></div>
或者
<div class="nosfbspic sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" /></div>
位置互换 应该不影响使用

shiquda

element.classList.add 用这个方法？

[JavaScript] 纯文本查看 复制代码

div[i].classList.add("nosfbspic")

plaodj

问题 已经自己解决

div1[i].className="nosfbspic";

原来是我考虑不周  问错了问题

hjxhjxjx

用this代表本元素，不需要函数，直接在onerror里弄
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" /></div>

hjxhjxjx

hjxhjxjx 发表于 2023-7-15 08:16
用this代表本元素，不需要函数，直接在onerror里弄

编辑错了。。。

[JavaScript] 纯文本查看 复制代码

<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" onerror="this.parentNode.className='sfbspic nosfbspic';" /></div>

cnwutianhao

可以使用JavaScript中的classList属性来添加或移除元素的类。在nofind()函数中，可以使用classList.add()方法将新的类名添加到具有"class='sfbspic'"的所有div元素上。以下是修改后的代码：

[JavaScript] 纯文本查看 复制代码

function nofind() {
  var divList = document.getElementsByClassName("sfbspic");
  for (var i = 0; i < divList.length; i++) {
    divList[i].classList.add("nosfbspic");
  }
}

这将为所有具有"class='sfbspic'"的div元素添加新的"class='nosfbspic'"。这样做之后，div元素将成为以下两种形式之一：

[HTML] 纯文本查看 复制代码

<div class="sfbspic nosfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" /></div>

或者

[HTML] 纯文本查看 复制代码

<div class="nosfbspic sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" /></div>

这样，就成功地给所有指定的div元素添加了新的类名。位置互换不会影响类的使用。