Főoldalra

jQuery CSS(); addClass(); removeClass().


css( )                 Közvetlen vagy előre meghatározott, új stílust rendel, a kiválasztott elemhez vagy elemekhez.

addClass( )       Hozzáad egy vagy több, de már meglévő class osztályazonosítót, a kijelölt elemekhez.

removeClass( )  Eltávolít egy vagy több class osztályazonosítót, a kijelölt elemeknél.

toggleClass( )   Előre meghatározott, class osztályazonosító hozzáadása / eltávolítása, a kijelölt elemeknél.

hasClass( )       Kiválasztott elemnél, class osztályazonosítónév keresése.
                            A keresett classnév létezik akkor true(igaz), ha nem létezik akkor false(hamis, nincs) értékkel tér vissza.

CSS()

<p id="p01"> Első bekezdés, tartalma.


<div class="klassz">

<p id="p02"> Második bekezdés tartalma.

</div>



<div id="iD01">

<p class="p03"> Harmadik bekezdés tartalma.

</div>



<div class="klassz">

<p class="p03"> Negyedik bekezdés tartalma.

</div>













<head>
<script>
$(document).ready(function(){

    $("#btncss01").click(function(){ 
       $("p").css("background-color", "yellow");
    });

// ------------------------------------------------------------------------------------------------------
    $("#btncss02").click(function(){ 
       $("#p02,#p03").css("background-color", "red");
    });

// ------------------------------------------------------------------------------------------------------
    $("#btncss03").click(function(){
       $("#p01, #p03").css("font-size","30px");
    });

// ------------------------------------------------------------------------------------------------------
    $("#btncss04").click(function(){ 
       $(".p03").css("fontSize","25px").css("backgroundColor", "yellow").css("fontStyle", "italic") ;
    });

// ---- Stílusok változóhoz rendelése.  ------------------------------------------------------------------
     var bmeret=35;   var bszin="blue";   var hszin="yellow";   var bstilus="italic";

   $("#btncss05").click(function(){
         $("#p02,#p03").css("fontSize",bmeret).css("color",bszin).css("fontStyle",bstilus).css("backgroundColor",hszin) ;
   });
});

</script>
</head>
<body>

addClass(); removeClass(); toggleClass();
és egy teszt css()

Tesztelésnél, ebben a sorrendben kattints a button gombokra, és figyeld, mi történik:
1. addClass-ra majd a remoweClass-ra,  a toggleClass-náll minegyikre kétszer.
2. Ebben a sorrendben:  első addClass-ra, második addClass-ra, harmadik addClass-ra.
3. toggleClass-náll minegyikre egyszer kattints.
4. Végezetül a css() button gombra.


<p> Bekezdés. Ez és további elemek, táblázaton kívül vannak.<p>

<div class="klassz"> .klassz{border: 4px solid black; background: #cfc; padding: 5px;}

<p id="p03"> Bekezdés. #p03{border: 3px solid green; background: white; padding: 3px;}

<p id="p04"> Bekezdés tartalma. Stílus meghatározása, nincs!

</div>

<p> Bekezdés. Ez és további elemek, táblázaton belül vannak.</p>

<div class="klassz">

<p class="p03"> Bekezdés.
.p03 {border: 3px solid green; background: white; padding: 3px;}

<p id="p05"> Bekezdés.
#p05 {border: 3px solid green; background: white; padding: 3px;}

</div>
addClass() és removeClass()







toggleClass( )



hasClass( )



A css() metódussal ellentétben, addClass() és toggleClass() nincs hatással, azaz nem módosítja azokat a stílusokat:
Melyek id azonosítóhoz tartoznak. Például: #azonosító{stílusok;}
Azon elemek stílusát, melyek egy másik elemmel kijelölt területen vannak, és a terület kijelölő elemnél , meghatároztuk a stílust.
Például: table p {font-size: 12px;}

addClass() egyenként hozzáadja a stílusokat, minden rendben megy.
togleClass(), ha csak egyszer kattintunk mindegyikre, nem a várt eredményt kapjuk.

<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

	<style>
		p{font-family: Arial; font-size: 16px; color: #000; line-height:130%;}
		.p03 {border: 3px solid green; background: white; padding: 3px;}
		#p03, #p05{border: 3px solid green; background: white; padding: 3px;}
		.klassz{border: 4px solid black; background: #cfc; padding: 5px;}
		table p{font-size: 12px;}
		.stilus01 {border: 3px solid blue; padding:10px;} 
		.stilus02 {font-size: 20px; background-color: Coral;} 
		.stilus03 {color: blue; font-style: italic;} 
	</style>
	
<script>
$(document).ready(function(){

 // ------------------    addClass   és   removeClass.     -------------------------------------------------------------
 
 // Egy class azonosító hozzárendelés, Visszavonás.	
	$("#addClass01").click(function() {  $("p").addClass("stilus01"); } );
		   // Visszavonás.
			$("#removeClass01").click(function(){ $("p").removeClass("stilus01"); } );

 // Kettő class azonosító hozzárendelés, Visszavonás.	
    $("#addClass02").click(function(){ $("p").addClass("stilus01 stilus02"); } );
		   // Visszavonás.	
			$("#removeClass02").click(function(){ $("p").removeClass("stilus01 stilus02"); } );

 // Három class azonosító hozzárendelés, Visszavonás.	
    $("#addClass03").click(function(){ $("p").addClass("stilus01 stilus02 stilus03"); } );
		   // Visszavonás.	
			$("#removeClass03").click(function(){ $("p").removeClass("stilus01 stilus02 stilus03"); } );	

			
 // -------------------- toggleClass()    -----------------------------------------------------------------------
 
 // Egy class azonosító hozzárendelés, Visszavonás.
	$("#btntogle").click(function(){ $("p").toggleClass("stilus01"); } );
	
 // Kettő class azonosító hozzárendelés, Visszavonás.
	$("#btntogle02").click(function(){ $("p").toggleClass("stilus01 stilus02"); } );
	
 // Három class azonosító hozzárendelés, Visszavonás.
	$("#btntogle03").click(function(){ $("p").toggleClass("stilus01 stilus02 stilus03"); } );
	
	
 // ---Előbbi három class stílus css() metódussal. --------------------------------------------------------
   $("#ClassCss").click(function(){ 
     $("p").css( {"border": "3px solid blue", "padding": "10px", "font-size": "20px","background-color": "Coral" ,"color": "blue", "font-style": "italic" }  );
   });	

	
 // ------------------- Létezik, vagy nem létezik. ---------------------------------------------------
	
    // Általunk meghatározott cls01, class osztályazonosító keresése.
	$("#btn09").click( function(){ alert($("p").hasClass("cls01"));  } );
	
    // Általunk meghatározott p03, class osztályazonosító keresése.
	$("#btn10").click( function(){ alert($("p").hasClass("p03"));  } );

});
</script>
</head>

<body>
<p> Bekezdés.<p>
<div class="klassz">
		<p id="p03"> Bekezdés. </p>
		<p id="p04"> Bekezdés. </p>
</div>

<table><tr><td>
<p> Bekezdés.</p>
<div class="klassz">
		<p class="p03"> Bekezdés.</p>
		<p id="p05"> Bekezdés.</p>
</div>
</td></tr></table>


<button id="addClass01">1. $("p").addClass("stilus01")</button>
<button id="removeClass01">1. $("p").removeClass("stilus01")</button>
<br />
<button id="addClass02">2. $("p").addClass("stilus01 stilus02")</button>
<button id="removeClass02">2. $("p").removeClass("stilus01 stilus02")</button>
<br />
<button id="addClass03">3. $("p").addClass("stilus01 stilus02 stilus03")</button>
<button id="removeClass03">3. $("p").removeClass("stilus01 stilus02 stilus03")</button>
<br />
<button id="btntogle">$("p").toggleClass("stilus01")</button>
<button id="btntogle02">$("p").toggleClass(" stilus01 stilus02")</button>
<button id="btntogle03">$("p").toggleClass("stilus01 stilus02 stilus03")</button>
<button id="ClassCss">css()metódus.</button><br />
<br />
<button id="btn09">"cls01" Létezik, vagy nem létezik?</button>
<button id="btn10">"p03" Létezik, vagy nem létezik?</button>

</body>