JS で span のスタイル属性を定義する方法

2年 ago
蓮, 翼
1 minute

JavaScriptでは、次のようにしてspan要素のstyle属性を定義できます。

  1. setAttributeメソッドを使用することで：
var span = document.createElement("span");
span.setAttribute("style", "color: red; font-size: 16px;");
  1. スタイル属性に直接値を設定：
var span = document.createElement("span");
span.style.color = "red";
span.style.fontSize = "16px";
  1. classList.addメソッドを使ってスタイルクラスを追加する:
var span = document.createElement("span");
span.classList.add("red-text");

この例では、.red-text クラスのスタイルを CSS で先に定義する必要があります。

.red-text {
  color: red;
  font-size: 16px;
}

注意してください。上記の方法のうち、1つ目の方法はあらゆるCSSスタイルを直接設定できますが、スタイル文字列の形式に注意してください。2つ目と3つ目の方法は、スタイル属性またはスタイルクラスに直接対応する設定のみ可能です。

bannerAds