jQuery CSS 스타일 변경하기

2021. 2. 9. 12:05

jQuery를 사용하여 CSS 스타일을 변경해 보겠습니다.

HTML 코드

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content ="IE= edge">
    <title>Creative jQuery</title>
    <link rel = "stylesheet" href ="./css/normalize.css">
    <link rel ="stylesheet" href="./css/main.css">

    <script src = "./js/vendor/jquery-1.10.2.min.js"></script>
    <script src = "./js/vendor/jquery-ui-1.10.3.custom.min.js"> </script>
    <script src = "./js/main.js"></script>


  </head>
  <body>
    <header class ="page-header" role = "banner">
        <h1> Creative jQuery Sample </h1>
    </header>

    <div class = "page-main" role="main">
        <div id ="typo"> //변경될 부분
            <div class ="inner"> Creative jQyery </div>
        </div>
    </div>

    <footer class ="page-footer" role ="contentinfo">
        <small class ="copyright"> COPYRIGHT *copy;
            <a href = "http://shsdfjk.co.jp" target ="_blank">
                SHIFTBISIA INC. </a>
        </small>
    </footer>



   </body>
</html>

main.js

$(function()
{
  $('#typo').css('color','#ebc000');
});

스타일을 변경하는 코드

$('선택자').css('속성', '값');

더 자세하게 설명하는 css() 메서드

css() 메서드에서 현재 속성값을 검색하는 방법

$(function() {
	$('#typo').css('color');
});

위 코드는 현재 속성값을 검색만 합니다. 따라서 코드를 실행하면 웹 브라우저에서 아무것도 변화하지 않습니다. (HTML 요소에는 아무런 변화가 없습니다.) 이런 코드를 작성하는 경우는 뒤에서 설명할 것이므로 여기서는 '현재 속성값을 검색할 수 있다." 라고만 기억하면 됩니다.

css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하는 방법

css() 메서드에서 여러 가지 속성값을 한꺼번에 변경하려면 코드를 어떻게 작성해야 할까요? 예를 들어 다음과 같은 코드를 작성하는 사람도 있을 겁니다.

여러 가지 속성값을 변겅하는 방법 (1)

$(function() {
	$('#typo').css('font-size', '50px');
    $('#typo').css('background-color', '#ae5e9b');
    $('#typo').css('color', '#ebc000');
});

효율적인 변경하는 방법

$('선택자').css({
	'속성 1' : '수치 1',
    '속성 2' : '수치 2',
    '속성 3' : '수치 3',
 });

여러 가지 속성값을 변겅하는 방법 (2)

$(function(){
	$('#typo').css({
    	'font-size' : '50px' ,
        'background-color : '#ae5e9b',
        'color : 'ebc000'
    })
});

여러 가지 속성값을 변겅하는 방법 (3)

$(function(){
	$('#typo').cs({
    	fontSize : '50px',
        backgroundColor : '#ae5e9b',
        color : '#ebc000'
   })
});

'Web > jQuery' 카테고리의 다른 글

jQuery 기본 구문 설명 (0)	2021.02.09
JQuery? (0)	2021.02.08
jQuery.ready() 란 (0)	2021.02.04

WantAirpod