jQuery css class

នៅក្នុង jQuery វាអនុញ្ញាតឲ្យយើងរៀបចំនៅ css ទៅឲ្យ html element បាន ដែលវាបានប្រើ method ដូចខាងក្រោម៖

• addClass()
• removeClass()
• toggleClass
• css()

1. addClass()

addClass method គឺគេប្រើសំរាប់ add class មួយ ឬ class ច្រើនទៅឲ្យ element ដែលយើងបាន select។

<style >
		.custom-background{
			width: 600px;
			height: 150px;
			background-color: #75E1F0;
			border-radius: 10px;
		}
</style>
	
	
<div id="bg"></div>


<script>

$(document).ready(function(){

$("#bg").addClass('custom-background') 	

})
</script>

ប្រជាមួយ active

<style >
		.custom-background{
			width: 600px;
			height: 150px;
			background-color: #75E1F0;
			border-radius: 10px;
		}
		.active{
			border: 5px solid blue;
		}
</style>

	
<div id="bg" style="cursor: pointer;"></div>


<script>

$(document).ready(function(){

$("#bg").addClass('custom-background') 	

$('#bg').click(function(){
	$("#bg").addClass('active')
})

})
</script>

ការ add class ជាច្រើននៅក្នុងតែមួយ ដោយគ្រាន់តែយើងចុចដកឃ្លា

<style >
		.custom-background{
			width: 600px;
			height: 150px;
			background-color: #75E1F0;
			border-radius: 10px;
		}
		.active{
			border: 5px solid blue;
		}
		.addBG{
			background-color: #8475F0;
		}
</style>

	
<div id="bg" style="cursor: pointer;"></div>


<script>

$(document).ready(function(){

$("#bg").addClass('custom-background') 	

$('#bg').click(function(){
//more class
	$("#bg").addClass('active addBG')
})

})
</script>

2. removeClass()

removeClass method គឺគេប្រើសំរាប់ remove class មួយ ឬ class ច្រើនទៅឲ្យ element ដែលយើងបាន select។

<style >
		.custom-background{
			width: 600px;
			height: 150px;
			background-color: #75E1F0;
			border-radius: 10px;
		}
		.active{
			border: 5px solid blue;
		}
		.addBG{
			background-color: #8475F0;
		}
</style>

	
<div id="bg" style="cursor: pointer;"></div>


<script>

$(document).ready(function(){

$("#bg").addClass('custom-background active addBG') 

// remove 	

$('#bg').click(function(){
	$('#bg').removeClass('active addBG')
})

})
</script>

clicked

3. toggleClass()

toggleClass method គឺគេប្រើសំរាប់ add និង remove ពី element ដែលយើងបាន select។

<style >
		.custom-background{
			width: 600px;
			height: 150px;
			background-color: #75E1F0;
			border-radius: 10px;
		}
		.active{
			border: 5px solid blue;
		}
		.addBG{
			background-color: #8475F0;
		}
</style>

	
<div id="bg" style="cursor: pointer;"></div>


<script>

$(document).ready(function(){

$("#bg").addClass('custom-background active') 

// toggle class 	

$('#bg').click(function(){
	$('#bg').toggleClass('active')
})

})
</script>

. css()

css method គឺគេប្រើសំរាប់ set និង return style attribute ។

single style

$('.test').css('property','value')

multiple style

$('.test').css({
              'property':'value',
              'property':'value'
         })

<style >
		.custom-background{
			width: 600px;
			height: 150px;
			background-color: #75E1F0;
			border-radius: 10px;
		}
		.active{
			border: 5px solid blue;
		}
		.addBG{
			background-color: #8475F0;
		}
</style>

	
<div id="bg" style="cursor: pointer;"></div>


<script>

$(document).ready(function(){

$("#bg").addClass('custom-background active') 

	

$('#bg').click(function(){
	$('#bg').css({
		'border-radius': '50%',
		'background-color':'pink',
		'width': '150'

	})
})

})
</script>