konakona-engineers diary

新米エンジニアのプログラミングブログ

JavaScriptのインラインスタイル

 

目次


・インラインスタイルとは

・インラインスタイルの追加方法

・インラインスタイルの削除方法

 

 

インラインスタイルとは


インラインスタイルとは、HTML要素の開始タグの中に直接CSSソースコードを記述するプロパティの指定方法。

インラインスタイルの追加と削除をするにはメソッドがそれぞれ存在する。

 

 

 

 

インラインスタイルの追加方法


setAttributeメソッドを使用する。

Attributeは日本語で「属性」と言う意味。

setAttribute=属性をセットするよ

これを用いることで、指定した要素に新しい属性を追加または属性の値を変更できる

 

基本の型

要素.setAttribute(name,value)

※要素=HTML上のdiv、h1、pなどのこと

 

・nameは属性の名前を文字列で指定する

valueは属性に設定したい値を指定する

 

例:HTML

<div id="bird">白鳥</div>

 

例:JS

const animal = document.getElementById("bird")

animal.setAttribute("style", "color: white;")
// <div id="bird" style="color: white;">白鳥</div> が取得できる

 

 

 

インラインスタイルの削除方法


removeAttributeメソッドを使用する。

これを用いることで、指定した要素から特定の属性を削除できる

 

基本の型

要素.removeAttribute(name,value)

 

・nameは属性の名前を文字列で指定する

valueは属性に削除したい値を指定する

 

例:HTML

<div class="contents" id="apple">りんご</div>

 

例:JS

const apple = document.getElementById("apple")

apple.removeAttribute("class", "contents")
// <div id="apple">りんご</div> が取得できる

 

 

以上。