if (boxIn.classList.add("rotate-box")==true){ boxIn.classList.remove("rotate-box") boxIn2.classList.remove("rotate-box") }不生效?
时间: 2024-03-21 10:44:14 浏览: 22
这段代码的逻辑是:如果给boxIn添加一个叫做"rotate-box"的class成功,则从boxIn和boxIn2中移除该class。但实际上,`classList.add()`方法不会返回一个Boolean值,因此`if (boxIn.classList.add("rotate-box")==true)`这行代码的判断条件是错误的。
你可以考虑改成以下代码:
```
if (boxIn.classList.contains("rotate-box")){
boxIn.classList.remove("rotate-box");
boxIn2.classList.remove("rotate-box");
}
```
这样的逻辑是:如果boxIn含有class为"rotate-box"的class,则从boxIn和boxIn2中移除该class。
相关问题
“document.addEventListener("click", function (event) { if (event.target.classList.contains("box-in-button")) { event.target.style.backgroundColor = "transparent"; event.target.innerHTML = "已关注"; event.target.style.backgroundColor = "rgba(0,0,0,.1)"; } }); ”这个代码可以优化吗?你认为这段代码如何?
这段代码可以进行一些优化。首先,我们可以将样式更改集中在一个类中,而不是在JavaScript中直接更改。这样做可以使代码更易读和维护。另外,我们可以使用事件委托,将事件监听器添加到父元素上,从而减少事件监听器的数量。
以下是优化后的代码示例:
HTML:
```html
<button id="parent-box" class="box">
<span class="box-in-button">关注</span>
</button>
```
CSS:
```css
.box-in-button {
background-color: transparent;
}
.box-in-button.followed {
background-color: rgba(0,0,0,.1);
}
```
JavaScript:
```javascript
document.getElementById("parent-box").addEventListener("click", function (event) {
if (event.target.classList.contains("box-in-button")) {
event.target.classList.add("followed");
event.target.innerHTML = "已关注";
}
});
```
优化后的代码使得样式更易于管理,并减少了事件监听器的数量。
在以下代码的图片的右上角加个图片<el-row v-loading="loading" class="device-container"> <el-card v-for="it in deviceList" :key="it.id" class="box-card" shadow="hover" :body-style="{ padding: '8px', position: 'relative' }"> <p
抱歉,我无法看到你的代码图片。但是我可以提供一些添加图片到网页的方法。
1. 使用HTML标签 `<img>`,将图片链接放在 `src` 属性中:
```
<img src="图片链接" />
```
2. 在Vue.js中,可以使用 `v-bind` 或简写的 `:` 绑定图片链接:
```
<img :src="imageLink" />
```
3. 在CSS中,可以使用 `background-image` 属性来添加背景图片:
```
div {
background-image: url('图片链接');
}
```
希望这些方法能够帮助到你。如果你有其他问题,可以继续问我。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)