如何检测 <s> 或 <del> 标记内部或下方的删除线文本答案

【问题标题】：How to detect the strikeout text inside or under an <s> or <del> tag如何检测 <s> 或 <del> 标记内部或下方的删除线文本
【发布时间】：2021-08-01 08:33:03
【问题描述】：

以下文本出现问题：

316.6.1 结构。不得建造结构

由以下 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>

但是text-decoration 属性没有正确返回line-through 值：

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)"

我希望有类似的东西，例如：line-through solid rgb(0, 0, 0)。简而言之，我需要以某种方式为上面的删除文本获得一个标志。仅供参考，我应该能够通过 Google Chrome 驱动程序/Selenium 运行脚本。

【问题讨论】：

你能创建和运行函数吗？（我不熟悉 Google Chrome 驱动程序/Selenium）
text-decoration 在孩子身上传播和积累，而不是继承，所以你得到的结果是正确的。这解释了原因，但在其他方面没有帮助。我不知道任何允许直接访问累积的 CSSOM 属性。 text-decoration 传播到几乎所有显示的内容中，除了原子内联框和流元素之外，因此您需要遍历跨度的祖先到根，仅在 display:inline-* 的祖先上停止自己的累积，@ 987654329@、position:absolute/fixed 或 float:left/right。

标签： javascript html css selenium

【解决方案1】：

使用此功能，您可以获得元素的所有样式及其祖先的列表，或者只是检查是否设置了特定样式：

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>

【讨论】：