nicht in der Lage Bild in einem div durch Javascript

-2

Hier zu ändern ist mein Code:nicht in der Lage Bild in einem div durch Javascript

<!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>

Quelle

2016-09-17 Sujeet Agrahari

Als Sie Ihre Frage stellten, gab es eine große orange ** Box ** zum Formatieren ** rechts neben dem Textbereich mit nützlichen Informationen darin. Es gab auch eine komplette Symbolleiste mit Formatierungshilfen. Und eine ** [?] ** -Taste mit Formatierungshilfe. * Und * einen Vorschaubereich zwischen dem Textbereich und dem Post Your Question-Button (so dass Sie darüber scrollen müssen, um den Button zu finden, um Sie dazu anzuregen, ihn anzuschauen) und zeigen, wie Ihr Beitrag aussehen würde, wenn er gepostet wird . Wenn Sie Ihren Beitrag klarstellen und zeigen, dass Sie sich die Zeit genommen haben, verbessern Sie Ihre Chancen, gute Antworten zu erhalten. –

Javascript! = Java. –

Ich habe die Formatierung korrigiert und die irrelevanten Tags entfernt, aber da dies deine * dritte * Frage ist, würde ich erwarten, dass du jetzt zumindest minimal formatieren würdest. –

Diese Zeile:

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

versucht, eine Funktion url genannt zu rufen und einen String, um es zu passieren, und dann Weisen Sie das Ergebnis der Eigenschaft backgroundImage zu.

Stattdessen möchten Sie eine Zeichenfolge zu backgroundImage direkt zuzuordnen:

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

Beispiel:

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>

Das heißt, es wou ld besser Ihr Styling und so in CSS zu definieren und dann diese Stile mit Elementen Selektoren, beispielsweise über eine Klassenvereinigung assoziieren:

CSS:

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

JavaScript:

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

Beispiel:

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>

Quelle

2016-09-17 17:03:34

Ist es möglich, dass Div sowohl eine ID als auch eine Klasse hat? –

@SujeetAgrahari: Natürlich (das 'div' in meinem zweiten Beispiel, zum Beispiel, sobald der Code ausgeführt wurde). Es kann auch mehrere Klassen haben. –

Danke @ T.J. Crowd! –

nicht in der Lage Bild in einem div durch Javascript

Antwort

Verwandte Themen