Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Beispielanalyse, wie CSS ID und Klasse verwendet, um Elementstile zu steuern

黄舟
Freigeben: 2017-07-20 09:13:47
Original
1767 Leute haben es durchsucht

Nun gibt es eine solche Beispielanforderung:

1) Zeichnen Sie fünf Kästchen, dargestellt durch die Schriftfarben Rot, Lila, Orange, Grün und Blau

2) Klicken Sie mit der Maus auf eines davon: Wenn es sich um ein Kästchen handelt, ist der Rand fett und zeigt dieselbe Farbe wie die Schriftfarbe des Kästchens an.

Der Effekt ist wie folgt:

(Bild 1) Box-Rendering

Das Folgende ist die spezifische Implementierungsidee:

1. HTML-Inhaltskonstruktion

Verwenden Sie zunächst HTML-Inhalte Um den Inhalt der fünf Felder auszudrücken, lautet der Code wie folgt:

<ul id=&#39;levelGroup&#39;>

    <li id=&#39;level1&#39; >红</li>
    <li id=&#39;level2&#39; >紫</li>
    <li id=&#39;level3&#39; >橙</li>
    <li id=&#39;level4&#39; >绿</li>
    <li id=&#39;level5&#39; >蓝</li>

 </ul>
Nach dem Login kopieren

2. Ursprüngliche Stilimplementierung

Verwenden Sie CSS, um die Stilanforderungen auszudrücken obige Anforderung 1. Der CSS-Code lautet wie folgt:

body{
  
  font-size: 10px;

}

#levelGroup{

	list-style: none;
	border: 1px solid gray;
	height: 40px;
	width: 200px;
	overflow: hidden;
	padding: 10px;

}

#level1{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: red;
	margin-right: 5px;
	text-align: center;
	padding-top: 5px;
}


#level2{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: purple;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}

#level3{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: orange;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level4{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: green;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level5{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: blue;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
Nach dem Login kopieren

Bisher können Sie den Effekt von Abbildung 1 vervollständigen.

3. Implementierung des interaktiven Stils

Als Nächstes haben wir bei der Analyse von Anforderung 2 festgestellt, dass das Element ein Drahtmodell in Fettschrift erhält, solange auf jedes li-Element geklickt wird Und der Farbwechselstil kann realisiert werden. Wie füge ich also einen Stil hinzu? Normalerweise besteht unser Ansatz darin, jedem Li ein Klassenattribut hinzuzufügen und den CSS-Stil der Klasse festzulegen (Rahmen fett, Farbänderung). Der spezifische CSS-Code lautet wie folgt:

.level1_selected{

  border: 2px solid red !important;

}

.level2_selected{

	border: 2px solid purple !important;
}
.level3_selected{

	border: 2px solid orange !important;
}
.level4_selected{

	border: 2px solid green !important;
}
.level5_selected{

	border: 2px solid blue !important;
}
Nach dem Login kopieren

Als nächstes lautet der Code für die Verwendung von js zur Steuerung des interaktiven Stils wie folgt:

$("#levelGroup li").click(function()
   
      //首先获取该元素的索引
      var index = $(this).index();


      //接着为该li添加相应的css交互样式
       var para_index = index+1;
       $(this).addClass("level"+para_index+"_selected");


     //同时也要将其他li元素的样式还原为初始状态
     $("#levelGroup li").each(function(){
        var curIndex = $(this).index();
        if(curIndex !=index){
             
             curIndex = curIndex+1;
             $(this).removeClass("level"+curIndex+"_selected");


       }

    });
Nach dem Login kopieren
});
Nach dem Login kopieren

Der endgültige Effekt ist in Abbildung 2 dargestellt:


Abbildung (2) Interaktion rendert eine Optimierung

Frage:

Durch die Beobachtung der Implementierung des obigen Codes können Leser schnell ein Problem entdecken:

Der Code in js ist umständlich zu bedienen und muss durchlaufen werden, und die Gesamteffizienz ist gering. Analyse:

Wie kann man also verbessern und optimieren? Durch die Analyse haben wir herausgefunden, dass der Grund für die Komplexität des Codes in js darin liegt, dass der ursprüngliche Stil von Anforderung 1 jedes li-Elements durch die ID gesteuert wird, z. B. #level1{......}, während der interaktive Stil von Anforderung 2 wird durch das Klassenattribut gesteuert, z. B. .level1_selected{......}, und der ursprüngliche Stil und der interaktive Stil jedes li-Elements sind unterschiedlich, sodass eine Indexpositionierung und -durchquerung durchgeführt werden muss, um den Stil während der Interaktion zu ändern .

Lösung:

Da es sich um ein Problem mit der CSS-Stileinstellungsmethode handelt, wie können wir Änderungen entwerfen?

Tatsächlich können wir diesem Konzept folgen: so wenig neue Steuerelemente hinzufügen wie mögliche Klasse, um nachfolgende js-Operationen zu reduzieren. Die obige Methode besteht beispielsweise darin, zu jedem Li in der Lösung von Anforderung 2 eine „ausgewählte Klasse“ hinzuzufügen, z. B. Klassenebene1_ausgewählt, Klassenebene2_ausgewählte .... Die ideale Lösung besteht hier darin, nur eine ausgewählte Klasse hinzuzufügen. Die ausgewählte Klasse muss jedoch in Verbindung mit der ID jedes LI verwendet werden, um sicherzustellen, dass jede ausgewählte Klasse einen anderen Stil hat. Vielleicht verstehen einige Schüler hier nicht viel, das ist in Ordnung! Schauen Sie sich einfach den Code unten an. Neugestaltung der Interaktion von Anforderung 2 (ausgewählt)

Als nächstes können wir sehen, wie der Code in js meiner Meinung nach auch geändert wird Stilklasse, schreiben Sie zuerst den js-Operationscode. Ist er derselbe wie der, den ich unten geschrieben habe?

#level1.selected{

	border: 2px solid red;

}

#level2.selected{

	border: 2px solid purple;
}
#level3.selected{

	border: 2px solid orange;
}
#level4.selected{

	border: 2px solid green;
}
#level5.selected{

	border: 2px solid blue;
}
Nach dem Login kopieren

Fühlen Sie sich nach dem Lesen des Codes genauso glücklich wie ich? Schließlich kann nur die Änderung der Art und Weise, wie Klassen in CSS hinzugefügt werden, den nachfolgenden JS-Code so prägnant machen! Eine hier gezogene Schlussfolgerung ist also (bereits oben erwähnt):
$("#levelGroup li").click(function(){
   
      $(this).addClass("selected").siblings().removeClass("selected");

});
Nach dem Login kopieren
Fügen Sie so wenige neue Kontrollklassen wie möglich hinzu, um nachfolgende js-Operationen zu reduzieren.


Das obige ist der detaillierte Inhalt vonBeispielanalyse, wie CSS ID und Klasse verwendet, um Elementstile zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage