JavaScriptからCSSのルールを追加する

2020/01/242021/11/19

忘却録。

コード

addLocalStyle.js// CSSを追加する
function addLocalStyle(text) {
  var style = document.createElement('style');
  style.type = 'text/css';
  style.textContent = text;
  document.head.appendChild(style);
}

※CSSの優先順位は、より後にあるものが優先される。
　そのため、<style>は、<head>内よりも<body>内にあるものの方が優先される。
　ただし、基本的に<style>は、<head>内に配置する要素である。

使用例

addLocalStyle('.sample1 { background: red !important; } .sample2 { background: blue !important; }');

サンプル

sample.html<style>
.sample-box {
  text-align: center;
}
.sample1,
.sample2 {
  width: 100px;
  height: 100px;
  margin: 0 auto 1em;
  border: 1px solid black;
  color: white;
  background: gray;
}
</style>
<script>
function addLocalStyle(text) {
  var style = document.createElement('style');
  style.type = 'text/css';
  style.textContent = text;
  document.head.appendChild(style);
}
function onClickSample() {
  addLocalStyle('.sample1 { background: red !important; } .sample2 { background: blue !important; }');
}
</script>
<div class='sample-box'>
  <div class='sample1'>sample1</div>
  <div class='sample2'>sample2</div>
  <button onclick='onClickSample();'>CSS追加</button>
</div>

sample1

sample2