1. 程式人生 > >【前端】設定好CSS樣式動態新增元素會按照樣式顯示

【前端】設定好CSS樣式動態新增元素會按照樣式顯示

這篇就是簡單記錄下一個小點:

設定好CSS樣式先,然後動態生成元素,元素可以按照CSS樣式顯示,只要對應到相應的規則即可。

<!DOCTYPE html>
<html>
<head>
  <title>Grid Layout Test</title>
  <style type="text/css">
    .container {
      display: grid | inline-grid;
    }

    #red {
      color: red;
    }
  </style
>
</head> <body> <div class="container"> <!-- <div id="red">Test</div> --> </div> <script type="text/javascript"> var container = document.getElementsByClassName('container'); // 返回一個數組 var test = document.createElement('p'); test.innerHTML =
"HELLO WORLD"; container[0].appendChild(test); // 不能用陣列新增子結點,而必須是單個元素 test.setAttribute('id', 'red');
</script> </body> </html>

這是為後面提前設定好佈局,然後動態生成元素做一下鋪墊。

END.