如何使用 JavaScript 获取与元素 SPAN 样式相关的所有文本？

Question

您好，我是 Javascript 新手。 而且看起来很有趣。

我正在使用 Javascript 从网页中获取元素。

特别是我想获取具有 Id 样式和特定值的 SPAN 元素的 outerHTML 文本：“display:inline-block;width:270px;”

所以这是一个例子：

“DESIRED_TEXT”

我想要的就是我想要的文本。

我有兴趣通过这个规则来获得它，因为在源代码中有很多不同种类的 SPAN 元素。

然后添加许多在 Javascript 数组的源代码中找到的项目。

我有一个方法，但这只是为了获取 ElementsBy Name：

"function GetNames()
  { 
    var images = document.getElementsByName('ListaFolios');
   var srcList = [];
    for(var i = 0; i < images.length; i++) {
    srcList.push(images[i].getAttribute('value'));
    };"
    return srcList.join()
  }"

这是要解析的 HTML 代码的一部分：

<span style="display:inline-block;width:270px;">3CA6CE9B-B23F-49BC-B54B-3F4DFC894C51</span></td><td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">BBA830831LJ2</span></td>
<td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:250px;">BBVA BANCOMER, S.A.</span></td><td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">MCE0708241W5</span></td><td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:250px;">MG7 CONSTRUCCION Y EDIFICACION SA DE CV</span></td>
<td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">2015-01-01T03:58:02</span></td><td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">2015-01-01T04:31:14</span></td>
<td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">BBA830831LJ2</span></td>
<td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">$938.44</span></td>
<td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">Ingreso</span></td><td style="WORD-BREAK:BREAK-ALL;"><span style="display:inline-block;width:150px;">Vigente</span>

现在的目标是区分 150px，因为两个值相同：

span style="display:inline-block;width:250px

和span style="display:inline-block;width:150px

对于span style="display:inline-block;width:270px，我没有问题，我想网站所有者决定设置一个唯一值，因为它是唯一记录。

适用于 150PX。

我将结果合并为一个数组。看起来像这样：

* Fecha de Emisión,CTU020225385 ,MCE0708241W5 ,2011-07-01T13:22:53,2011-07-01T13:23:01,TLE011122SC2 ,$6,100.00,Ingreso,Vigente,,CCO8605231N4 ,MCE0708241W5 ,2011-07-01T17:08:25,2011-07-01T17:08:26,DIA031002LZ2 ,$200.00,Ingreso,Vigente,,OEX950605MJ6 ,MCE0708241W5 ,2011-07-02T08:44:20,2011-07-02T08:44:20,DIA031002LZ2 ,$200.00,Ingreso,Vigente,,SAGC471229QB3,MCE0708241W5 ,2011-07-02T13:08:00,2011-07-02T13:08:01,SFE0807172W8 ,$2,360.12,Ingreso,Vigente,,CTU020225385 ,MCE0708241W5 ,2011-07-04T13:11:33,2011-07-04T13:12:06,TLE011122SC2 ,$12,200.00,Ingreso,Vigente,,CCO8605231N4 ,MCE0708241W5 ,2011-07-04T17:37:30,2011-07-04T17:37:30,DIA031002LZ2 ,

我正在寻找 CTU020225385、CCO8605231N4、OEX950605MJ6 和 SAGC471229QB3 之间的模式。这些值之间有 7 个项目。

所以我需要删除数组上的这 7 个项目，依此类推，仅按照这些模式获取这些值。

问候

Answer 1

var spans = document.getElementsByTagName("span");

for(var i=0; i<spans.length; i++){
  var st = spans[i].style;
  if(st.display.match("inline-block") && st.width.match("270px")) {
      // We have a match! Do something with that element
      alert( spans[i].innerHTML ); // "DESIRED_TEXT"
  }
}