【问题标题】:Find element with style attribute and change it查找具有样式属性的元素并更改它
【发布时间】:2019-09-13 21:32:47
【问题描述】:

首先我不知道我是否以正确的名称称呼这些对象。

但是是否可以遍历一个 html 文件并选择一个带有样式属性 bgcolor 的标签(我知道这已经过时了)。

每 x 次我需要具有样式属性 bgcolor 的元素。拥有不同于其他元素的颜色。 x的次数是不规则的,不是恒定的,除了bgcolor标签之外没有恒定的因素。

我试图找出我可以使用哪些元素表现一致,以便将其用作起点。唯一找到的是 bgcolor 标签。

这是我从中检索 html 信息的代码。

<?php
    //get url var
    $page = $_GET['page'];
    if(empty($page)){
        $page = '2';
    }
$page2nav = '';

if($page=="2"){
    $output = file_get_contents('linktodata');
    $output = strip_tags($output,'<body><div><button><style><td><table><td.white><tr><tbody><b><script>');
    $page2nav = ' class="active"';
}
?>
    <div class="contentwrapper">
      <div class="content">
        <?php echo $output; ?>
    </div>
    </div>

用php脚本拉取的css

<style type="text/css">
    td.white{border-style: none;} 
    TD {font-family: Arial; 
        font-size: 11pt;
        max-width: 500px;
        word-wrap: break-word;} 
    body {color: black; background: white;} 
    table { border-collapse: collapse } 
    td { border: 1px solid black 
         max-width: 500px;
         word-wrap: break-word;}
    </style>
<TABLE BORDER=1 id="table"><tbody><tr bgcolor="orange"><td colspan="9">blablablablablablablabla</td></tr><tr><b><td>datum</td><td align="center">M</td><td align="center">V</td><td>blabla</td><td>resource</td><td>blablag</td></tr><tr bgcolor="orange">                                 
<td> <b>22-04-2019</b> </td>                                
<td align="center"> <b>6</b> </td>                                
<td align="center"> <b>4</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b> no caterteam </b> </td>                                
<td> <b>no kok </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25">6</td>                                
<td align="center" width="25"></td>                                
<td>blabla</td>                                
<td>blabla</td>                                
<td>blabla</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25"></td>                             
<td align="center" width="25">4</td>                             
<td>blabla</td>                             
<td>PersoneelsCatering Veggie</td>                             
<td>avondcatering</td>                             
</tr><tr bgcolor="orange">                                 
<td> <b>23-04-2019</b> </td>                                
<td align="center"> <b>14</b> </td>                                
<td align="center"> <b>10</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b>blala</b> </td>                                
<td> <b>blabla </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25"></td>                                
<td align="center" width="25">4</td>                                
<td></td>                                
<td>blalal</td>                                
<td>blalal</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">6</td>                             
<td align="center" width="25"></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">1</td>                             
<td align="center" width="25"></td>                             
<td></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>

唯一重复的是 bgcolor:orange。

我的计划是将这些行更改为其他颜色的橙色。

【问题讨论】:

  • 当然可以。但也许可以解释一下你想用它实现什么,因为你提出并需要帮助的解决方案似乎已经是错误的举动了。
  • 是什么决定了“x”的数量?你希望它是随机的吗?

标签: javascript php html css html-table


【解决方案1】:

这是使用 bgcolor 属性更改元素的一种方法。看看它是否适合你。如果它不能更好地解释,我会尽力帮助你。

function changeBgColorElements(color) {
    var list = document.querySelectorAll('[bgcolor]');
    list.forEach(e=>e.setAttribute('bgcolor',color));  
}


changeBgColorElements('green');
<TABLE BORDER=1 id="table"><tbody><tr bgcolor="orange"><td colspan="9">blablablablablablablabla</td></tr><tr><b><td>datum</td><td align="center">M</td><td align="center">V</td><td>blabla</td><td>resource</td><td>blablag</td></tr><tr bgcolor="orange">                                 
<td> <b>22-04-2019</b> </td>                                
<td align="center"> <b>6</b> </td>                                
<td align="center"> <b>4</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b> no caterteam </b> </td>                                
<td> <b>no kok </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25">6</td>                                
<td align="center" width="25"></td>                                
<td>blabla</td>                                
<td>blabla</td>                                
<td>blabla</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25"></td>                             
<td align="center" width="25">4</td>                             
<td>blabla</td>                             
<td>PersoneelsCatering Veggie</td>                             
<td>avondcatering</td>                             
</tr><tr bgcolor="orange">                                 
<td> <b>23-04-2019</b> </td>                                
<td align="center"> <b>14</b> </td>                                
<td align="center"> <b>10</b> </td>                                
<td> <b>blabla</b> </td>                                
<td> <b>blala</b> </td>                                
<td> <b>blabla </b> </td>                                
</tr>
<tr>                                
<td class="white"></td>                                
<td align="center" width="25"></td>                                
<td align="center" width="25">4</td>                                
<td></td>                                
<td>blalal</td>                                
<td>blalal</td>                                
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">6</td>                             
<td align="center" width="25"></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>
<tr>                             
<td class="white"></td>                             
<td align="center" width="25">1</td>                             
<td align="center" width="25"></td>                             
<td></td>                             
<td>blabla</td>                             
<td>blabla</td>                             
</tr>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-05-01
    • 2014-01-15
    • 1970-01-01
    • 1970-01-01
    • 2013-11-03
    • 2016-07-02
    • 2012-04-05
    相关资源
    最近更新 更多