JavaScriptで要素を変更する方法-jsチュートリアル-php.cn

JavaScriptで要素を変更する方法

青灯夜游

リリース： 2021-06-18 17:18:51

オリジナル

4872 人が閲覧しました

方法: 1. 「element.innerText='value'」または「element.innerHTML='value'」ステートメントを使用して要素のコンテンツを変更します。 2. 「element.style」または「element」を使用します。 .className" ステートメント要素のスタイルプロパティを変更します。

JavaScriptで要素を変更する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

要素を変更する操作

JavaScript の DOM 操作では、Web ページのコンテンツ、構造、スタイルを変更できます。DOM 操作要素を使用して、コンテンツ、属性などを変更できます。要素の内部。

要素の内容を変更します

element.innerText開始位置から最後までの内容終了位置ですが、htmlタグが削除され、同時にスペースや改行も削除されます

element.innerHTMLの開始位置から終了位置までの全内容 には、スペースと改行を保持したまま、html タグが含まれます。

innerText は HTML タグを認識しませんが、innerHTML は HTML タグを認識します。これら 2 つのプロパティは読み取りおよび書き込み可能です。

<body>
    <button>
        显示系统当前时间
    </button>
    <div>
        某个时间
    </div>
    <script>
    	var btn = document.querySelector(&#39;button&#39;);
        var div = document.querySelector(&#39;div&#39;);
        btn.onclick = function(){
            div.innerText = getDate();
        }
        
        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            var arr = [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;];
            var day = date.getDay();
            return &#39;今天是&#39;+year+&#39;年&#39;+month+&#39;月&#39;+dates+&#39;日&#39;+arr[day];
        }
    </script>
</body>

ログイン後にコピー

JavaScriptで要素を変更する方法

実行後、一定の時刻が表示されますので、クリックすると現在のシステム時刻が表示され、現在の日付と週が表示されます。

JavaScriptで要素を変更する方法

#スタイル属性の変更

element.style はインライン操作を変更し、element.className はクラスを変更します。 name スタイル属性

<head>
	<style>
        div {
            width:200px;
            height:200px;
            background-color:pink;
        }
	</style>
</head>
<body>
    <div>
        
    </div>
    <script>
    	var div = document.quertSelector(&#39;div&#39;);
        div.onclick = function(){
         this.style.backgroundColor = &#39;purple&#39;;
         this.style.width=&#39;300px&#39;;
        }

    </script>
</body>

ログイン後にコピー

プログラムを実行すると、幅と高さ 200 ピクセルのピンク色のボックスが表示されます。ボックスをクリックすると、幅 300 ピクセル、高さ 200 ピクセルの紫色のボックスに変わります。 200ピクセル。 JS はスタイルのスタイル操作を変更し、インラインスタイルを生成します。

className を使用してスタイル属性を変更する

<head>
    <style>
        div {
            width:100px;
            height:100px;
            background-color:pink;
        }
        .change {
            width:200px;
            height:200px;
            background-color:purple;
        }
    </style>
</head>
<body>
    <div>
       文本    
    </div>
    <script>
    	vet test =document.querySelector(&#39;div&#39;);
        test.onclick = function(){
            //将当前元素的类名改为change
          this.className = &#39;change&#39;;  
        }
    </script>
    
</body>

ログイン後にコピー

[関連する推奨事項:

JavaScript 学習チュートリアル]

以上がJavaScriptで要素を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。