CSS 如何通过部分类名获取元素

在本文中，我们将介绍如何通过部分类名来获取元素的方法。

阅读更多：CSS 教程

1. 使用 attribute selectors 属性选择器

CSS 的 attribute selectors 属性选择器可以通过元素的属性选择元素，其中就包括 class 属性。我们可以使用 attribute selectors 属性选择器来匹配元素的部分类名。下面是一些示例：

/* 匹配以"button"开头的类名 */
[class^="button"] {
  /* 样式 */
}

/* 匹配以"primary"结尾的类名 */
[class$="primary"] {
  /* 样式 */
}

/* 匹配包含"btn"的类名 */
[class*="btn"] {
  /* 样式 */
}

在上面的示例中，我们通过 ^=、$= 和 *= 符号来匹配类名中的特定部分。这样，我们就可以根据部分类名来选择对应的元素进行样式设置。

2. 使用 :matches 伪类

通过使用 :matches 伪类，我们可以根据部分类名来选择元素。这个伪类允许我们使用 , 分隔选择符，并且只选择匹配其中一个选择器的元素。下面是一个示例：

/* 选择所有包含"button"的部分类名的元素 */
:matches([class*="button"]) {
  /* 样式 */
}

在上面的示例中，我们使用 :matches 伪类来选择包含部分类名”button”的元素。通过这个方法，我们可以非常灵活地选择多个部分类名相同的元素。

3. 使用 JavaScript

除了使用 CSS 选择器来获取元素，我们还可以使用 JavaScript 来获取元素并操作它们的样式。下面是一个使用 JavaScript 来获取部分类名为”button”的元素并添加样式的示例：

var elements = document.querySelectorAll('[class*="button"]');
Array.prototype.forEach.call(elements, function(element) {
  element.classList.add('active');
});

在上面的示例中，我们使用 querySelectorAll 方法来获取部分类名为”button”的所有元素，并使用 classList.add 方法来添加一个名为”active”的类名，从而改变这些元素的样式。

无论是使用 CSS 的选择器还是 JavaScript，都可以根据元素的部分类名来获取并操作对应的元素。

总结

通过本文的介绍，我们了解了如何使用 CSS 的 attribute selectors 属性选择器、:matches 伪类以及 JavaScript 来通过部分类名来获取元素。这些方法可以帮助我们更灵活地操作页面上的元素样式，为我们的开发工作带来便利。无论是在 CSS 中使用属性选择器和伪类，还是在 JavaScript 中使用 querySelectorAll 方法，我们都可以通过部分类名来选择和操作元素，实现我们想要的效果。