[jQuery]CSS, 스타일 적용하기(width, height, display등등)

원주남자
포로그래밍/jQuery
2019. 7. 10.

안녕하세요? 원주남자입니다!

이번 시간에는 jquery를 사용하여 스타일을 지정하는 방법을 알아보겠습니다.

저번 시간에는 style코드를 head에 명세하고 class와 id를 통하여 css를 적용시켰는데요~

이번에는 버튼 이벤트를 통하여 동적으로 css가 적용되는 것을 보겠습니다.

https://wonjuman.tistory.com/12

(id, class를 사용한 스타일 적용 예제 필요하신 분 확인하세요~)

먼저 알아야 하는 것은 jquery의 css()라는 메서드입니다.

이 css() 메서드는 두 가지로 활용이 됩니다.

1. 지정된 css스타일을 값을 가져올 때


<img src="img1.png" id="img1" style="width:100px;height:100px"/>

이런 이미지가 있을 경우, width의 값을 알고 싶을 때는


$('#img1').css('width');

위와 같이 사용하시면 100px이라는 값을 반환받을 수 있습니다.

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
 <script>
function css_action(){
	alert($("#img1").css("width"));
}
 </script>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
 
<input type="button" id="btn_add" onclick="css_action()" value="css확인"/>
<img src="img/img1.jpg" id="img1" style="width:100px">

 </body>
</html>

2. css의 동적 적용.

우리가 확인하려고 하는 내용이죠. css를 동적으로 적용하는 것 인데요.


$("#img1").css("width", "100px");

적용 시킬 경우에는 css메서드에 첫번째 파라미터에는 해당속성을 두번째 파라미터에는 해당 속성의 수치, 값을 넣어주면됩니다.

전체 소스로 확인해볼게요.

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
 <script>
function css_action(){
	$("#img1").css("width", "100px");
}
 </script>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
 
<input type="button" id="btn_add" onclick="css_action()" value="css적용"/>
<img src="img/img1.jpg" id="img1">

 </body>
</html>

버튼을 클릭하게 되면 아래와 같은 결과를 얻을 수 있습니다.

간단하죠?

이미지에 한번에 여러개의 속성을 적용할 경우에는 아래와 같이 사용하시면 됩니다~

$("#img1").css({
  'width': '100px',
  'height': '100px'
});

좋은 하루되세요~

저작자표시 비영리 변경금지

'포로그래밍 > jQuery' 카테고리의 다른 글

[jQuery] 이벤트 사용시 $(this)의미와 활용 (0)	2020.12.08
[Jquery] Each()함수를 사용한 li값 가져오기 (0)	2020.12.03
[Javascript] 배열(Array)선언, 추가, 삭제, 관리방법 (0)	2020.11.29
[jQuery]ul안쪽의 li태그의 동적 추가(append) 및 삭제(remove) (2)	2019.07.08
[jQuery]span, div등태그의 class값 변경 및 attr()의 활용 (0)	2019.07.02

원주남자