ホームページ ウェブフロントエンド jsチュートリアル JavaScript学習メモ(20)要素の特性(属性)の取得と設定_基礎知識

JavaScript学習メモ(20)要素の特性(属性)の取得と設定_基礎知識

May 16, 2016 pm 05:52 PM
要素 特性

HTML のこのセクションでは、例として以下を取り上げます

コードをコピー コードは次のとおりです:

1. HTMLElement タイプの属性を使用して要素のプロパティを取得および設定します。 )
コードをコピー コードは次のとおりです:

var div = document.getElementById(" myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//要素のプロパティを取得
alert(div.id) ); //"myDiv"
alert(div.className); //"bd"、class は予約されたキーワードなので、これは div.class ではありません
alert(div.title); am div"
alert( a.href); //http://www.baidu.com
//要素のプロパティを設定
div.id = "myDiv2"; //ID を "myDiv2" に変更します"
div.className = "ft"; //クラスは "ft" に変更されます。 "ft" という名前のスタイルがある場合は、すぐに "ft" スタイルに変更され、ブラウザーはすぐに応答します
div.title = "I am myDiv2" ; //タイトルを "I am myDiv2" に変更します
div.align = "center" //中央揃えを設定します
img.src ="images/img1. gif"; //画像パスを設定します
a.innerHTML = "Sina"; //「Baidu」を「Sina」に変更します
a.href = "http://www.sina.com.cn" ; // ハイパーリンクをリセットします

2. getAttribute()、setAttribute()、removeAttribute() メソッドを使用して要素の属性を取得、設定、および削除します (最初の 2 つのメソッドは推奨されません) IE6 と 7 には例外があり、3 番目のメソッド IE6 はサポートされていません。カスタム属性の設定時に使用できます)
getAttribute() メソッドは要素の属性を取得するために使用されます。要素の属性名を取得する 1 つのパラメーターを受け取ります。
setAttribute() メソッドは、要素の属性を設定するために使用されます。要素の属性名と属性値を取得するための 2 つのパラメーターを受け取ります。
removeAttribute() メソッドは、要素の属性を削除するために使用されます。削除する要素の属性名である 1 つのパラメータを受け入れます
コードをコピー コードは次のとおりです:

var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA"); >//要素のプロパティを取得します。
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd" に注意してください。上記とは異なります。
alert(div.getAttribute("title")) //"私は div"
alert(a.getAttribute("href")); ://www.baidu. com
//要素の属性を設定します
div.setAttribute("id","myDiv2") //ID を "myDiv2" に変更します
div.setAttribute("class") ,"ft"); / /クラスは "ft" に変更されます。ここでも className ではなくクラスです。
div.setAttribute("title","I am myDiv2"); //タイトルは "I" に変更されます。 am myDiv2"
div.setAttribute ("align","center"); //中央揃えを設定します
img.setAttribute("src","images/img1.gif"); //画像パスを設定
//要素の属性を削除します
div.removeAttribute("class"); //クラス属性を削除します

3. 属性を通じて要素の属性を取得、設定、削除します。属性

コードをコピー コードは次のとおりです。
var div = document.getElementById(" myDiv");
//要素のプロパティを取得
alert(div.attributes["id"].nodeValue); //"myDiv"
//要素の属性を設定
div.attributes[" id"].nodeValue = "myDiv2"; //id を "myDiv2" に変更します
//要素の属性を削除します
div.attributes.removeNamedItem("class"); //クラスの属性を削除します

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Spring MVC の主要な概念をマスターする: これらの重要な機能を理解する Spring MVC の主要な概念をマスターする: これらの重要な機能を理解する Dec 29, 2023 am 09:14 AM

SpringMVC の主要な機能を理解する: これらの重要な概念を習得するには、特定のコード例が必要です。 SpringMVC は、開発者が Model-View-Controller (MVC) アーキテクチャ パターンを通じて柔軟でスケーラブルな構造を構築するのに役立つ Java ベースの Web アプリケーション開発フレームワークです。ウェブアプリケーション。 SpringMVC の主要な機能を理解して習得すると、Web アプリケーションをより効率的に開発および管理できるようになります。この記事では、SpringMVC の重要な概念をいくつか紹介します。

Golang にはクラスのようなオブジェクト指向機能はありますか? Golang にはクラスのようなオブジェクト指向機能はありますか? Mar 19, 2024 pm 02:51 PM

Golang (Go 言語) には伝統的な意味でのクラスの概念はありませんが、構造体と呼ばれるデータ型が提供され、これによってクラスと同様のオブジェクト指向機能を実現できます。この記事では、構造体を使用してオブジェクト指向機能を実装する方法を説明し、具体的なコード例を示します。構造体の定義と使用法 まず、構造体の定義と使用法を見てみましょう。 Golang では、type キーワードを通じて構造を定義し、必要に応じて使用できます。構造には属性を含めることができます

CSS トランジション効果: 要素のスライド効果を実現する方法 CSS トランジション効果: 要素のスライド効果を実現する方法 Nov 21, 2023 pm 01:16 PM

CSS トランジション効果: 要素のスライド効果を実現する方法 はじめに: Web デザインでは、要素の動的な効果によりユーザー エクスペリエンスを向上させることができます。その中でも、スライド効果は一般的で人気のあるトランジション効果です。 CSS のトランジション プロパティを使用すると、要素のスライド アニメーション効果を簡単に実現できます。この記事では、CSS トランジション プロパティを使用して要素のスライド効果を実現する方法を紹介し、読者がよりよく理解して適用できるように具体的なコード例を示します。 1. CSS トランジション属性の概要 トランジション CSS トランジション属性 tra

ニーズと機能に基づいて、該当する Go バージョンを選択してください ニーズと機能に基づいて、該当する Go バージョンを選択してください Jan 20, 2024 am 09:28 AM

インターネットの急速な発展に伴い、プログラミング言語は常に進化し、更新されています。中でもGo言語はオープンソースのプログラミング言語として近年注目を集めています。 Go 言語は、シンプル、効率的、安全で、開発とデプロイが簡単になるように設計されています。高い同時実行性、高速なコンパイル、メモリの安全性などの特徴を備えており、Web開発、クラウドコンピューティング、ビッグデータなどの分野で広く使用されています。ただし、現在、Go 言語のさまざまなバージョンが利用可能です。適切な Go 言語バージョンを選択するときは、要件と機能の両方を考慮する必要があります。頭

CSS 変換: 要素の回転効果を実現する方法 CSS 変換: 要素の回転効果を実現する方法 Nov 21, 2023 pm 06:36 PM

CSS 変換: 要素の回転効果を実現する方法には、特定のコード サンプルが必要です。Web デザインでは、アニメーション効果はユーザー エクスペリエンスを向上させ、ユーザーの注意を引くための重要な方法の 1 つであり、回転アニメーションは最も古典的なものの 1 つです。 CSS では、「transform」属性を使用して、回転を含む要素のさまざまな変形効果を実現できます。この記事では、CSS「transform」を使用して要素の回転効果を実現する方法と、具体的なコード例を詳しく紹介します。 1.CSSの「transf」の使い方

CSS を使用して要素の透明度のグラデーション効果を実現する方法 CSS を使用して要素の透明度のグラデーション効果を実現する方法 Nov 21, 2023 pm 01:38 PM

CSS を使用して要素の透明グラデーション効果を実現する方法 Web 開発では、Web ページ要素にトランジション効果を追加することは、ユーザー エクスペリエンスを向上させる重要な手段の 1 つです。透明度のグラデーション効果は、ページを滑らかにするだけでなく、要素の重要なコンテンツを強調表示することもできます。この記事では、CSS を使用して要素の透明度のグラデーション効果を実現する方法を紹介し、具体的なコード例を示します。 CSS トランジション属性の使用 要素の透明グラデーション効果を実現するには、CSS トランジション属性を使用する必要があります。 t

C++ 関数の種類と特性 C++ 関数の種類と特性 Apr 11, 2024 pm 03:30 PM

C++ 関数には、単純関数、const 関数、静的関数、および仮想関数というタイプがあり、インライン関数、デフォルト パラメーター、参照戻り値、およびオーバーロードされた関数などの機能が含まれます。たとえば、calculateArea 関数は π を使用して、指定された半径の円の面積を計算し、それを出力として返します。

Linux gem とは何ですか? Linux Gem の定義と特徴について詳しく知る Linux gem とは何ですか? Linux Gem の定義と特徴について詳しく知る Mar 14, 2024 pm 02:18 PM

LinuxGem はコンピュータ分野の一般的な用語で、Linux オペレーティング システム上で適切に動作するソフトウェアまたはアプリケーションを指します。 Linux オペレーティング システム自体は、多くの開発者やコミュニティのサポートを受けたオープン ソース オペレーティング システムであるため、Linux 上で高品質で強力なソフトウェアを簡単に見つけることができます。しかし、高品質なソフトウェアが数多く存在する中でも、Linuxには「LinuxGem」と呼ばれる、優れたデザイン、パフォーマンス、機能を備えたソフトウェアが人気を集めています。

See all articles