Search code examples
jquerycsscontainsdynamic-html

jQuery dynamic HTML attributes overwriting script


I have been struggling for a few days now working with jQuery trying to write a script that replaces dynamically created span style colors from a chatbox of a forum.
Both elements are wrapped inside a td element with class="chat" and a span with style="color:green" like this

<td class="chat"><span style="color:darkgreen;">test</span></td>

The scripts I tried to write for instance (that did not work sadly);

$(".chat:contains('darkgreen')").css("color", "rgb(255, 111, 7)");
$(".chat:contains('darkgreen')").css("font-weight", "bold");
$(".chat:contains('darkgreen')").css("text-shadow", "bold");
$(".chat:contains('darkgreen')").css("text-shadow", "rgb(0, 0, 0) 1px 1px 1px");
$(".chat:contains('darkgreen')").css("text-shadow", "rgb(255, 111, 7) 1px 0px 6px");

I've also tried changing the class "chat" with a few other classes like td, chat but none of them worked either way, any ideas how can I make it work with jQuery even after a new td & class is being generated by the chatbox to change their desired span color with my CSS?


Solution

  • You can access it via

    $(".chat>span[style='color:darkgreen;']")
    .css({
      "color":"rgb(255, 111, 7)",
      "font-weight": "bold",
      "text-shadow": "bold",
      "text-shadow": "rgb(0, 0, 0) 1px 1px 1px",
      "text-shadow": "rgb(255, 111, 7) 1px 0px 6px"
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="chat"><span style="color:darkgreen;">test</span></td>
      </tr>
    </table>