JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="header">
  <div id="gnb">
    <ul>
      <li><a class="btn_nav1" href="#section1">메뉴1</a></li>
      <li><a class="btn_nav2" href="#section2">메뉴2</a></li>
      <li><a class="btn_nav3" href="#section3">메뉴3</a></li>
      <li><a class="btn_nav4" href="#section4">메뉴4</a></li>
    </ul>
  </div>
</div>
<!-- // #header -->

CSS

#gnb a{border:1px solid red}
#gnb .btn_nav1{border-color:blue;}
#gnb .btn_nav2{border-color:green;}
#gnb .btn_nav2{border-color:red;}

JavaScript

/***** [ 스타일 다루기 ] *****/


/* [스타일 값 구하기] */
console.log( $('.btn_nav1').css('border-color') );
console.log( $('.btn_nav1').css(['border-color', 'border-width']) );


/* [스타일 값 설정하기] */
$('.btn_nav2').css('border-color', '#ccc');
$('.btn_nav3').css({
	'background': 'gray',
  'font-size': 20
});


/* [클래스 추가] */
$('.btn_nav2').addClass('on ready active');


/* [클래스 추가] */
$('.btn_nav2').remove('on ready active');