プロパティ cssText

プロパティ cssText を使用すると、 CSS スタイルを一括して1行で設定できます。これにより、 属性 style の内容全体が上書きされます。

構文

javascript要素.style.cssText = 'プロパティ1: 値; プロパティ2: 値...'

例

要素に複数のスタイルを設定してみましょう：

html<p id="elem"></p>

javascriptlet elem = document.querySelector('#elem');
elem.style.cssText = 'color: red; font-size: 40px;';

例

この例では、要素には最初から 属性 style にスタイルが すでにありますが、プロパティ cssText はそれを上書きします：

html<p id="elem" style="background: red;"></p>

javascriptlet elem = document.querySelector('#elem');
elem.style.cssText = 'color: red; font-size: 20px;';

例

以前のスタイルが上書きされないようにするには、 次のようにすることができます：

html<p id="elem" style="background: green;"></p>

javascriptlet elem = document.querySelector('#elem');
elem.style.cssText += 'color: red; font-size: 20px;';

関連項目