Use getComputedStyle to identify the CSS font-weight for all P tags

Question

Objective

• To use getComputedStyle to identify the CSS font-weight assigned to text in a page and note this as text into a span at the start of the P tag/s.

Reason

• To create a bookmarklet for personal use in identifying where CSS is used to apply strong/bolded text visually. Then a determination can be made if the CSS should be replaced with HTML strong.

Issues

• Only applies to first P tag in the page.
• Replaces existing text rather than adding to the existing word/s.

Code so far

var newClass = document.getElementsByTagName('p')
var length = newClass.length;
for (var i = 0; i < length; i++) {
  newClass[i].className =  newClass[i].className + "font--weight"
}

let pAll = document.querySelector('p.font--weight');
let calcStyles = window.getComputedStyle(pAll);
pAll.textContent = 'My computed font-weight is ' + calcStyles.getPropertyValue('font-weight');
pAll.innerHTML = '<span>' + pAll.textContent + '</span>'; 

• Is this possible, if no there ends the question.
• Is there a better way to achieve this?
• Needed in JavaScript not jQuery.

Answer 1

Use el.querySelectorAll() to get the nodeList, el.querySelector() will return the first node of the selector only. Then you just need to use getComputedStyle(selector).getPropertyValue('style') to get the computed style. From there is just concatenating the strings together and setting the innerHTML or textContent to the string.

Once you have the nodeList, run the elements through a loop to get each one.

let pTagClass = document.querySelectorAll('.check-weight')

function getFontWeight(els) {
  els.forEach(weight => {
    // weight now represents each individual node in 
    // our nodeList that was passed into the function
    let compStyle = getComputedStyle(weight).getPropertyValue('font-weight');
    let str = `<span class="bookmark">font-weight is: ${compStyle},</span>`
    let currentText = weight.textContent
    weight.innerHTML = `${str} ${currentText}`
  })
}

getFontWeight(pTagClass)

.check-weight {
  font-family: "Bahnschrift", sans-serif;
}

.heavy {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

.light {
  font-weight: lighter;
}

.bookmark {
  font-weight: normal;
  font-size: smaller;
  background-color: yellow;
  padding: 2px;
}

<p class="heavy check-weight">This is a heavy weight</p>
<p class="heavy check-weight">This is also a heavy weight</p>
<p class="light check-weight">This is a light weight</p>
<p class="normal check-weight">This is normal</p>