Найти элемент с атрибутом стиля и изменить его - PullRequest
0 голосов
/ 24 апреля 2019

Сначала я не знаю, правильно ли я называю объекты.

Но можно ли пройти через html-файл и выбрать тег с атрибутом стиля bgcolor (я знаю, что он устарел).

Каждое количество раз, когда мне нужен элемент с атрибутом стиля 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>

CSS, который извлекается с помощью сценария php

<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.

Мой план состоит в том, чтобы заменить эти строки оранжевым цветом на другой цвет.

1 Ответ

0 голосов
/ 24 апреля 2019

Это один из способов изменения элементов с атрибутом 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...