下面是一个用于比较两个数组并使用条件CSS样式的示例代码:
HTML代码:
比较数组并应用条件CSS样式
- Apple
- Banana
- Orange
- Strawberry
- Watermelon
JavaScript代码:
const arr1 = ['Apple', 'Banana', 'Orange'];
const arr2 = ['Banana', 'Strawberry', 'Watermelon'];
const listItems = document.querySelectorAll('#list li');
listItems.forEach(item => {
const text = item.textContent;
if (arr1.includes(text) && arr2.includes(text)) {
item.classList.add('matched');
} else {
item.classList.add('not-matched');
}
});
在上面的示例中,我们有两个数组arr1
和arr2
,它们分别包含了要比较的元素。然后,我们使用document.querySelectorAll
选择所有元素,并使用
forEach
迭代每个元素。
对于每个元素,我们获取其文本内容,并使用includes
方法检查它是否同时存在于arr1
和arr2
中。如果是,则将CSS类名matched
添加到元素的类列表中;否则,将CSS类名not-matched
添加到元素的类列表中。
这样,具有匹配元素的列表项目将应用matched
类的CSS样式,而不匹配的列表项目将应用not-matched
类的CSS样式。
上一篇:比较两个数组并删除相同的值
下一篇:比较两个数组并添加或替换内容?