js中根据class名获取span的值
时间: 2024-03-12 11:50:22 浏览: 11
可以使用以下代码来获取class名为`example`的第一个span元素的值:
```javascript
var spanValue = document.querySelector('.example span').textContent;
console.log(spanValue);
```
如果要获取所有class名为`example`的span元素的值,可以使用以下代码:
```javascript
var spanValues = [];
var spans = document.querySelectorAll('.example span');
for (var i = 0; i < spans.length; i++) {
spanValues.push(spans[i].textContent);
}
console.log(spanValues);
```
相关问题
javascript怎么根据class控制span元素的显隐
可以使用以下代码来根据 class 控制 span 元素的显隐:
```
// 获取所有 class 为 example 的元素
var elements = document.getElementsByClassName("example");
// 遍历所有元素
for (var i = 0; i < elements.length; i++) {
// 判断是否显示
if (elements[i].style.display === "none") {
// 显示元素
elements[i].style.display = "block";
} else {
// 隐藏元素
elements[i].style.display = "none";
}
}
```
其中,`getElementsByClassName` 方法可以获取所有 class 为 `example` 的元素,然后遍历所有元素,根据元素当前是否显示来进行显隐控制。
原生动态切换span标签的class名
可以使用JavaScript来实现原生动态切换span标签的class名。具体实现方法如下:
1. 首先获取需要切换class名的span标签,可以使用document.querySelector()或document.querySelectorAll()方法来获取。
2. 使用classList属性来添加或删除class名,具体方法如下:
- 添加class名:element.classList.add("class-name");
- 删除class名:element.classList.remove("class-name");
3. 在需要切换class名的事件中,使用上述方法来切换class名即可。
以下是一个示例代码:
```html
<!-- HTML代码 -->
<span id="my-span" class="old-class">Hello World!</span>
```
```javascript
// JavaScript代码
var mySpan = document.getElementById("my-span");
// 切换class名
mySpan.addEventListener("click", function() {
if (mySpan.classList.contains("old-class")) {
mySpan.classList.remove("old-class");
mySpan.classList.add("new-class");
} else {
mySpan.classList.remove("new-class");
mySpan.classList.add("old-class");
}
});
```