font-weightの特定の値の背景色を変えるサンプル

<div class="content">
  <p>Hello <span class="fw600">world!</span></p>
  <p>Add background <span class="fw800">color</span> pink.</p>
</div>

.content {
  font-size: 2em;
}

.fw600 {
  font-weight: 600;
}

.fw800 {
  font-weight: 800;
}

const allElements = document.querySelectorAll('body .content *');

allElements.forEach((element) => {
  const style = window.getComputedStyle(element)
  const fontWeight = style.fontWeight

  if (/\d+?/.test(fontWeight) && fontWeight !== '400') {
    element.style.backgroundColor = 'pink'
  }
})

元記事を表示する