ここ - 優秀な図書館

-2

が私のコードではJavaScript経由のdiv内の画像を変更することはできません：その後、urlという関数を呼び出し、それに文字列を渡すここ

document.getElementById("bulb").style.backgroundImage = url("1.png");

試み、そして：

<!DOCTYPE html> 
<html> 

<body> 
    <script> 
    function light() { 
     if (document.getElementById("push").value == "OFF") { 
     document.getElementById("bulb").style.backgroundImage = url("1.png"); 
     document.getElementByID("push").value = "ON"; 
     } 
     else { 
     document.getElementById("bulb").style.backgroundImage = url("2.png"); 
     document.getElementByID("push").value = "OFF"; 
     } 
    } 
    </script> 
    <center> 
    <input type="button" id="push" onclick="light()" value="OFF" /> 
    <div id="bulb" style="background-image:url(2.png);width:320px;height:420px"> 
    </div>enter code here 
    </center> 
</body> 
</html>

出典

2016-09-17 Sujeet Agrahari

あなたの質問に答えると、テキストエリアの右側に大きいオレンジ色**の書式設定**ボックスが表示され、そこに役に立つ情報が表示されました。また、書式設定支援ツールバー全体がありました。 ** [？] **ボタンを押すと書式設定のヘルプが表示されます。 *また、テキストエリアと投稿の質問ボタンの間にあるプレビューエリア（ボタンを見つけるために過去にスクロールする必要があるため、あなたがそれを見てみることを推奨します）。あなたの投稿をはっきりさせ、時間を割いていることを実証することで、良い答えを得る機会が増えます。 –

javascript！= java。 –

私は書式を修正して無関係なタグを削除しましたが、これは* 3番目の質問であるため、少なくとも今のところ最小限のフォーマットにすることが期待されます。 –

この行は、その結果をbackgroundImageプロパティに割り当てます。

document.getElementById("bulb").style.backgroundImage = "url(1.png)"; 
// Note ------------------------------------------------^----^----^^

例：言っ

document.getElementById("bulb").style.backgroundImage = "url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32)";

<div id="bulb" style="width: 32px; height: 32px"></div>

、それWOU

は代わりに、あなたは文字列直接backgroundImageを割り当てます

CSS：

.class-saying-what-the-image-represents { 
    background-image: url(1.png); 
}

はJavaScript：

document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");

CSSであなたのスタイルとこのように定義したクラスの会合を介して、たとえば、セレクタを使用して要素とそれらのスタイルを関連付けした方がよいLD例：

document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");

.class-saying-what-the-image-represents { 
 
    background-image: url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32); 
 
}

<div id="bulb" style="width: 32px; height: 32px"></div>

出典

2016-09-17 17:03:34

divにidとクラスの両方がある可能性はありますか？ –

@SujeetAgrahari：もちろん（私の2番目の例の 'div'は、コードが実行された後など）。また、複数のクラスを持つこともできます。 –

ありがとう@ T.J。クラウダー！ –

ここ

答えて

関連する問題