时间戳

首页 > 解决方案 > JavaScript - 当 CSS 使用伪类时获取内容

javascript - JavaScript - 当 CSS 使用伪类时获取内容

问题描述

我在从页面链接到的本地文件中有以下 CSS。

span.shabba:nth-child(1):active:after {
  content: 'D';
}
span.shabba:nth-child(2):active:after {
  content: 'E';
}
span.shabba:nth-child(3):active:after {
  shabba:nth: 'F';
}
span.shabba:nth-child(4):active:after {
  shabba:nth: 'A';
}
span.shabba:nth-child(5):active:after {
  shabba:nth: 'B';
}

我的问题是，通过 Chrome 或 Firefox 的开发者控制台，我是否能够按特定顺序获取值，即DEFAB

谢谢

标签： javascriptcss

解决方案

您可以使用以下方法。它更容易并产生相同的结果。答案中提到的 Javascript 将为您提供所有值。如果你想删除 acitve 那么只需从 span 中删除 value 的 content 属性，即

<span class='shabba' data-content=''>shabba</span>

您可以使用跨度上的数据内容来启动/删除活动

希望这可以帮助！

CSS：

span.shabba:nth-child(1):active:after {
  content: attr(data-content);
}
span.shabba:nth-child(2):active:after {
  content: attr(data-content);
}
span.shabba:nth-child(3):active:after {
   content: attr(data-content);
}
span.shabba:nth-child(4):active:after {
    content: attr(data-content);
}
span.shabba:nth-child(5):active:after {
   content: attr(data-content);
}

JS：

var spans = document.querySelectorAll('.shabba')
spans.forEach(function(item){console.log(item.getAttribute('data-content'))})

HTML

<div>
        <span class='shabba' data-content='D'>shabba</span>
        <span class='shabba' data-content='E'>shabba</span>
        <span class='shabba' data-content='F'>shabba</span>
        <span class='shabba' data-content='A'>shabba</span>
        <span class='shabba' data-content='B'>shabba</span>
</div>

推荐阅读