循环出来的dom动态添加css样式
时间: 2023-08-16 20:15:30 浏览: 42
您可以使用JavaScript中的style属性来动态添加CSS样式。以下是一个例子:
```javascript
var element = document.getElementById("example");
element.style.color = "red";
element.style.backgroundColor = "yellow";
```
在上面的代码中,我们获取了一个id为“example”的元素,然后使用style属性来设置其文字颜色为红色,背景颜色为黄色。您可以根据需要设置其他CSS属性。
相关问题
循环出来的dom根据下标动态添加css样式
您可以使用JavaScript中的querySelectorAll方法结合循环来根据下标动态添加CSS样式。以下是一个例子:
```javascript
var elements = document.querySelectorAll(".example");
for (var i = 0; i < elements.length; i++) {
if (i % 2 == 0) {
elements[i].style.color = "red";
} else {
elements[i].style.color = "blue";
}
}
```
在上面的代码中,我们首先通过querySelectorAll方法获取所有类名为“example”的元素,然后通过循环遍历每个元素。如果元素的下标是偶数,我们就将其文字颜色设置为红色,否则设置为蓝色。您可以根据需要设置其他CSS属性。
微信小程序for循环被点击dom修改样式
要实现这个需求,需要在小程序中使用 WXML 和 JavaScript。
首先,在 WXML 中使用 `wx:for` 循环渲染出需要的 DOM 元素,例如:
```html
<view wx:for="{{items}}" wx:key="{{index}}" bindtap="handleTap" data-index="{{index}}" class="{{index === activeIndex ? 'active' : ''}}">
{{item}}
</view>
```
其中,`items` 是需要渲染的数组,`activeIndex` 是当前选中的元素的索引,`handleTap` 是点击事件的回调函数。
然后,定义 `handleTap` 函数,在函数中获取被点击的元素的索引,并更新 `activeIndex` 的值,例如:
```javascript
Page({
data: {
items: ['item1', 'item2', 'item3'],
activeIndex: -1
},
handleTap: function(e) {
const index = e.currentTarget.dataset.index;
this.setData({
activeIndex: index
});
}
})
```
最后,在 CSS 中定义 `.active` 类的样式,例如:
```css
.active {
background-color: red;
color: white;
}
```
这样就可以实现当用户点击某个元素时,该元素被高亮显示的效果。