JavaScript基本教程

JavaScriptオブジェクト

JavaScript関数

JSHTMLDOM

JSブラウザBOM

AJAX基礎教程

JavaScriptリファレンスマニュアル

JS DOM 要素属性の変更 JS DOM HTMLコンテンツの変更

JS DOM CSSの変更

HTML DOMはJavaScriptがHTML要素のスタイル（CSS）を取得し変更することを許可しています。

変更するエレメントのスタイル

您可以使用style属性将样式应用于特定的HTML元素。

要更改HTML元素的样式，请使用以下语法：

element.style.property　=　value

下面的示例更改<h1>元素的样式：

例

<!DOCTYPE　html>
<html>
<h1　id="demo">HTML　DOM　style　Property</h1>
<script>
document.getElementById("demo").style.color　=　"blue";
</script>
</html>

テストを見て‹/›

当用户单击按钮时，此示例更改<h1>元素的样式：

例

<h1　id="demo">HTML　DOM　style　Property</h1>
<button　onclick="myFunc()">Click</button>
<script>
function　myFunc()　{
　　　document.getElementById("demo").style.color　=　"blue";
}
</script>

テストを見て‹/›

当用户单击按钮时，此示例还更改了<h1>元素的样式：

例

<h1　id="demo">HTML　DOM　style　Property</h1>
<button　onclick="document.getElementById('demo').style.color　=　'blue';">Click</button>

テストを見て‹/›

从元素获取样式信息

同样，您可以使用style属性将样式应用于HTML元素。

以下示例将从具有id="demo"的元素获取样式信息（border-top）：

例

var　x　=　document.getElementById("demo").style.borderTop;

テストを見て‹/›

注意：当从元素中获取style样式信息时，该属性不是很有用，因为该属性仅返回元素的style属性中设置的样式规则，而不返回来自其他位置的样式规则，例如嵌入式样式表中的样式规则，或外部样式表。

要获取实际上用于呈现元素的所有CSS属性的值，可以使用以下window.getComputedStyle()方法：

例

let　para　=　document.querySelector('p39;);
let　compStyles　=　window.getComputedStyle(para);
para.innerHTML　=　'font-size:　'　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+=　'<br>line-height:　'　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+=　'<br>padding:　'　+　compStyles.getPropertyValue('padding');

テストを見て‹/›

要素にCSSクラスを追加

以下のように使用することもできます。className属性はHTML要素のCSSクラスを取得または設定します。

例

document.getElementById("x").className = "para";

テストを見て‹/›

以下のように使用することもできます。classList属性を簡単に要素から取得、設定、または削除してCSSクラスを変更できます。

以下の例では、<p>要素にparaクラス：

例

var elem = document.getElementById("x");
elem.classList.add("para");

テストを見て‹/›

複数のクラスを<p>要素：

例

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

テストを見て‹/›

から<p>要素からクラスを削除：

例

var elem = document.getElementById("x");
elem.classList.remove("para");

テストを見て‹/›

二つのクラス間で切り替え<p>要素：

例

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

テストを見て‹/›

クラスを切り替え（「開く」）してサイドナビゲーションボタンを作成します：

コードを実行

JS DOM 要素属性の変更 JS DOM HTMLコンテンツの変更