javascript - CSS 目标所有文本转换 : uppercase?

Question

我想知道是否有一种方法可以定位所有具有以下内容的文本:

text-transform: uppercase;

这里的想法是，在排版方面，如果你使用所有大写字母，你应该增加字母间距以提高易读性，并且只针对所有大写文本而不是为每个大写字母添加字母间距属性和每个类都有 transform:uppercase。

这可以用 CSS 或 SASS 实现吗？

Answer 1

简单回答:否，CSS 无法检测是否在 DOM 中设置了样式属性。但是您可以使用 JS 检查 CSS 属性，这意味着与 DOM 一起工作。

代码片段:

var uppercased = document.querySelector('.texta');
var property = window.getComputedStyle(uppercased).getPropertyValue('text-transform');
if (property == 'uppercase') {
  uppercased.style.letterSpacing = '3px';
};

.texta {
  text-transform: uppercase;
}

<div class="texta">Text A</div>
<div class="textb">Text B</div>