背景をクリックして青を赤に、赤から青に変更するにはどうすればよいですか?私のコードの何が問題なのでしょうか?助けて、ありがとう
思如磐石
思如磐石 2017-12-13 17:20:50
0
6
1664


背景をクリックして青を赤に、赤から青に変更するにはどうすればよいですか?私のコードの何が問題なのでしょうか?助けてください、ありがとう

QQ图片20171213171840.jpg


##<!DOCTYPE html>

<html>

<head>

##</head>

##<style>

##test1 {

width:300px;

高さ:300px;

背景:青;

}

#test2 {

幅:300px;

高さ: 300px;

background:red;

}

</style>

<body>

<div id ="test1" onclick="te()"></div>

##</body>

<script>


function te(){

var a = document.getElementById('test1');

if(a.id == 'test1'){

# # a.id = 'test2';

}else

a.id = 'test1';

}

</script>

</html>

#
思如磐石
思如磐石

全員に返信(5)
ganhuihui

りー


いいねを押す +0
ganhuihui

りー


いいねを押す +0
  • 返事 &lt;!DOCTYPE html&gt; &lt;html&gt; <頭> &lt;/head&gt; <スタイル> #test1 { 幅:300ピクセル; 高さ:300ピクセル; 背景色:青; } &lt;/スタイル&gt; <本体> &lt;div id="test1"&gt;&lt;/div&gt; &lt;/ボディ&gt; &lt;スクリプト&gt; 関数 test1() { var a = document.getElementById('test1'); var FinalStyle = a.currentStyle ? a.currentStyle : document.defaultView.getComputedStyle(a, null);/*currentStyle がサポートされているかどうか (ie であるかどうか) を判断するために使用します。 13. さまざまな方法でスタイルを取得*/ if(finalStyle.backgroundColor=="rgb(0, 0, 255)"){ a.style.backgroundColor="赤"; } else if(finalStyle.backgroundColor=="rgb(255, 0, 0)"){ a.style.backgroundColor="青"; } } 関数 addEvent(obj,type,handle){ try{// Chrome、FireFox、Opera、Safari、IE9.0 以降 obj.addEventListener(type,handle,false); }キャッチ(e){ try{// IE8.0 以下 obj.attachEvent('on' + タイプ,ハンドル); }catch(e){ // 初期のブラウザ obj['on' + type] = ハンドル; } } } window.onload = function(){ var 要素 = document.getElementById("test1"); addEvent(要素,"クリック",test1); } &lt;/スクリプト&gt; &lt;/html&gt;
    ***huihui 著者 2018-01-18 14:31:01
有人@我
  1. addinventlisner() を使用してクリック イベントをリッスンし、赤に初期化し、初めてクリックして青に変更し、その後クリックして赤にすることができます

  2. クラス {background-color: を準備します。 #f00}、クリックするとクラス名が追加され、クリックするとそのクラス名が削除されます

  3. 引っ越しイベントと引っ越しイベントを使用できます

いいねを押す +0
p~ang~胖

2回目の実行時はAは未定義です。 var a = document.getElementById('test1'); を関数の外に置くだけです

いいねを押す +0
dabour

1 つの ID を変更するだけではなく、マッチングが成功すると別の ID が表示されます。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート