jQuery로 스타일 지정하기

소개

클래스

예제

<style>
		.pink{
			color:pink;
		}
		.yellow{
			color: yellow;
		}
</style>

<p>lorem ipsum </p>

예제 2

<style>
	.pink{
		color:pink;
        }
  </style>

<p>lorem ipsum</p>

<script>

/*
This callback runs as soon as 
the DOM is Loaded
*/
$(document).ready(function(){

//adding pink class to p element
$('p').addClass('pink');

});
</script>

removeClass

<style>
   .pink{color:pink;}
 </style>

<p class="pink">lorem ipsum </p>

<script>
/*
This callback runs as soon as 
the DOM is Loaded
*/
$(document).ready(function(){

//removing pink class to p element
   $('p').removeClass('pink');

});
</script>

클래스 전환

<style>
    .pink{color:pink;}
</style>

<p class="pink">lorem ipsum</p>

<script>
/*
This callback runs as soon as 
the DOM is Loaded
*/
$(document).ready(function(){

/*
Since p element has pink class, 
pink class will be removed.
*/
$('p').toggleClass('pink');

/*
Since p element hasn't pink class, 
pink class will be added. 
*/
$('p').toggleClass('pink');

/*
Since p element has pink class, 
pink class will be removed. 
*/
$('p').toggleClass('pink');

});
</script>

CSS 메서드

<button>My Button</button>

<script>
/*
Below, the button element's color style 
has been read and written 
to the color variable.
*/
let color = $('button').css('color');

/* 
Now let's change the button color by assigning 
the red value to the second argument=
*/
$('button').css('color', 'red')

/*
If we want to change more than one style of 
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});

</script>

jQuery API

축하합니다