Heim >Web-Frontend >js-Tutorial >So ändern Sie die Hintergrundfarbe von Div mit Javascript

So ändern Sie die Hintergrundfarbe von Div mit Javascript

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-06-11 17:18:214978Durchsuche

In JavaScript können Sie das Style-Objektattribut verwenden, um die Div-Hintergrundfarbe zu ändern. Das Syntaxformat ist „element object.style.background="color value"". Das Style-Objekt stellt eine einzelne Stildeklaration dar und kann über das Dokument oder Element, auf das der Stil angewendet wird, aufgerufen werden.

So ändern Sie die Hintergrundfarbe von Div mit Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Idee: Durch Klicken auf ein Div wird die Hintergrundfarbe anhand der Anzahl der Klicks geändert, um die Hintergrundfarbe zu ändern. Dabei werden hauptsächlich Zahlen addiert und akkumuliert.

Code;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js实现点击div改变背景颜色</title>
    <style>
        div{
            background: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div></div>

</body>
<script type="text/javascript">
 var div=document.getElementsByTagName("div")[0];/*通过标签名div组*/
 var count=0;/*计数,从0开始,每点击一下加一*/
 div.onclick = function () { /*给div绑定点击函数*/
     count ++;
     /*判断点击的次数,来改变背景颜色*/
     if(count % 3==1){
         this.style.background="yellow"
     }else if(count % 3==0){
         this.style.background="red"
     }else {
         this.style.backgroundColor="#ff9000"
     }

 }

</script>
</html>

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Hintergrundfarbe von Div mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn