HTML DOM 入力範囲オブジェクト-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML DOM 入力範囲オブジェクト

王林

Aug 28, 2023 pm 04:01 PM

HTML DOM 入力範囲オブジェクトは、タイプ「range」の要素に関連付けられています。 createElement() メソッドと getElementById() メソッドを使用して、それぞれ型範囲の入力要素を作成し、アクセスできます。

プロパティ

入力範囲オブジェクトのプロパティは次のとおりです:

#3#4disabled5form#6List#78#NameStepスライダーコントロールのステッププロパティ値を設定または返します。 Typeスライダーコントロールの value プロパティ値を設定または返します。

	プロパティと説明
1	autocomplete 範囲コントロールのオートコンプリートプロパティ値を設定または返します。
#2	autofocus レンジスライダーコントロールが自動であるかどうかを設定または返します。ページの読み込みフォーカスを取得します。
	defaultValue レンジスライダーコントロールのデフォルト値を設定または返します。
	スライダーコントロールが無効かどうかを設定または返します。
	スライダーコントロールを含むフォームへの参照を返します。
	スライダーコントロールを含むデータリストへの参照を返します。。
Max	スライダーコントロールの最大プロパティ値を設定または返します。
Min	スライダーコントロールの最小プロパティ値を設定または返します。 #9
	スライダーコントロールの name プロパティ値を設定または返します。 #10
	#11
スライダーコントロールのフォーム要素のタイプを返します。	#12 value
	#メソッドパスワードオブジェクトのメソッドは次のとおりです:

シリアル番号

#メソッドと説明

##1 スライダーコントロールの値を指定された数値だけ減らします。スライダーコントロールを指定された数値だけインクリメントします。

<!DOCTYPE html>
<html>
<head>
<script>
   function rangeCreate() {
      var R = document.createElement("INPUT");
      R.setAttribute("type", "range");
      document.body.appendChild(R);
}
</script>
</head>
<body>
<h1 id="Input-range-object">Input range object</h1>
<p>Create an input field with type range by clicking the below button</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html>

出力

	stepDown()
	2 stepUp()
	Example 入力範囲オブジェクトの例を見てみましょう: Demonstration

stepDown()

stepUp()

Example

入力範囲オブジェクトの例を見てみましょう:

Demonstration

これにより、次の出力が生成されます。

##[作成] ボタンをクリックします。

in 上記の例では、-

CREATE という名前のボタンを作成しました。これは、ユーザーがクリックすると rangeCreate() メソッドを実行します。 - HTML DOM Input Range对象

<button onclick="rangeCreate()">CREATE</button>

rangeCreate() メソッドは、createElement() を使用します。ドキュメントオブジェクトのメソッドは、パラメータとして「INPUT」を渡して

要素を作成します。新しく作成された入力要素は変数 R に割り当てられ、値範囲を持つ type 属性が setAttribute() メソッドを使用して作成されます。

setAttribute() は属性を作成し、属性が存在しない場合は値を割り当てます。以前は存在しませんでした。最後に、ドキュメント本体の appendChild() メソッドを使用して、型範囲の入力要素を本体の子要素として追加します - HTML DOM Input Range对象

function createPASS() {
   var R = document.createElement("INPUT");
   R.setAttribute("type", "range");
   document.body.appendChild(R);
}

以上がHTML DOM 入力範囲オブジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はtutorialspointで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

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

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。