0

定義済みの css スタイルを持つ html 要素がある場合

<h1 style="color:blue;">This is a header</h1>

text-align:centerここで、 h1 要素に呼び出される新しいスタイルを追加したい場合。

既存のスタイルを上書きせずに、スタイル属性の末尾に新しいスタイル属性を追加するにはどうすればよいですか?

したがって、結果は次のようになります

<h1 style="color:blue;text-align:center">This is a header</h1>
4

3 に答える 3

1

これを行うには、次の3 つの方法があります。

jsfiddle の例

1 - 要素のスタイル プロパティを設定- オンザフライで JavaScript のスタイル設定を行いますが、懸念事項の分離を破ることはほぼ間違いありません。

HTML:

<h1 id="headerExample1" style="color:blue;">This is a header</h1>

JavaScript:

var ex1 = document.getElementById('headerExample1');

if (someLogic) {
    ex1.style.textAlign = "center";
}

2 - スタイル属性を設定しますstyle- これは 3 つの中で最も汚いですが、 JavaScript を使用してプロパティに直接アクセス/変更する方法についてのアイデアを提供します

HTML:

<h1 id="headerExample2" style="color:blue;">This is a header</h1>

JavaScript:

var ex2 = document.getElementById('headerExample2');

if (someLogic) {
    ex2.setAttribute('style', ex2.getAttribute('style') + ";text-align:center");
}

3 - CSS とクラス- これは、関心の分離に関してヘッダーをスタイルする最もクリーンな方法です。

HTML:

<h1 id="headerExample3">This is a header</h1>

CSS:

#headerExample3 {color:blue;}
.centered {text-align:center;}

JavaScript:

var ex3 = document.getElementById('headerExample3');

if (someLogic) {
    ex3.className = "centered";
}
于 2012-12-05T18:57:39.230 に答える
0

javascriptを使用します：document.getElementById（ "h1id"）。style.textAlign = "center";

上記のh1idを、htmlで指定するIDに置き換えます。

于 2012-12-05T18:38:41.163 に答える
0

インライン スタイルを使用することはお勧めできません。それらをオーバーライドすることは難しく、Web 開発ではコンテンツとレイアウトの分離を維持することが重要だからです。

スタイルシートを使用することをお勧めします:

h1 {
    color:blue;
    text-align:center
}

JavaScript を使用:

document.getElementsByTagName('h1').style.textAlign="center";
于 2012-12-05T18:33:13.870 に答える