How to detect the strikeout text inside or under an <s> or <del> tag

user_8406765 0
Viewed 83

The issue occurs with the following text:

316.6.1 Structures. Structures shall not be constructed

Which is defined by the following HTML:

<b>
    <s>
        <span style='font-size:10.0pt'>316.6.1 Structures</span>
    </s>
</b>
<s>
    <span style='font-size:10.0pt'>. Structures shall not be
        <span style='letter-spacing:.75pt'> </span>
        constructed
    </span>
</s>

But the text-decoration property is not returning the line-through value properly:

span_array = document.getElementsByTagName('span'));
> HTMLCollection(74812)

span_array[10648].innerText
> "316.6.1 Structures"
window.getComputedStyle(span_array[10648], null).getPropertyValue("text-decoration");
> "none solid rgb(0, 0, 0)"

span_array[10649].innerText
> ". Structures shall not be constructed"
window.getComputedStyle(span_array[10649], null).getPropertyValue("text-decoration");
> "none solid rgb(0, 0, 0)"

I would expect something like e.g.: line-through solid rgb(0, 0, 0). In short, what I need to achieve is somehow get a flag for the strikeout text above. FYI I should be able to run the script through Google Chrome Driver/Selenium.

selenium css html javascript
1 Answers

With this function you can get list of all styles for an element and it's ancestors, or simply check if a specific style is set:

function getStyles(el, style = null, is = null, array = [])
{
  try
  {
    if (el)
    {
      const s = window.getComputedStyle(el);
      if (is !== null && style !== null && s[style] == is)
        return true;

      array[array.length] = style ? s[style] : s;
      return getStyles(el.parentNode, style, is, array);
    }
  }catch(e){}
  return is === null ? array : false;
}

// true/false if this element or it's parents have line-through text decoration
console.log( getStyles(document.querySelector("span"), "textDecorationLine", "line-through") ); 

//array of textDecorationLine values for the element and all parents
console.log( getStyles(document.querySelector("span"), "textDecorationLine") );

//list of all styles for the element and all parents
console.log( getStyles(document.querySelector("span")) );
<b>
    <s>
        <span style='font-size:10.0pt'>316.6.1 Structures</span>
    </s>
</b>
<s>
    <span style='font-size:10.0pt'>. Structures shall not be
        <span style='letter-spacing:.75pt'> </span>
        constructed
    </span>
</s>

user_29300380
Related