JavaScript で CSS を追加する

1. このページの目的

JavaScript で CSS を追加してみる。

2. デモ

window.onload イベント発生時に JavaScript で <style> 要素を追加し、表の中の文字を青色にしている。

名前 趣味
太郎 野球
二郎 サッカー

3. ソースコード

HTML

<table class="table1">
  <thead>
  <tr>
    <th>名前</th>
    <th>趣味</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>太郎</td>
      <td>野球</td>
    </tr>
    <tr>
      <td>二郎</td>
      <td>サッカー</td>
    </tr>
  </tbody>
</table>

JavaScript

window.addEventListener('load', (event) => {
  const style = document.createElement('style');
  const css = `
.table1 tbody tr td {
  color: blue;
}
`;
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
});

4. メモ