JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="wrap">
  hello
</div>
<br>
<button id="btnPlus">폰트 크게</button>
<button id="btnMinus">폰트 작게</button>

CSS

#wrap{width:200px;height:200px;border:1px solid red;font-size:30px;}

JavaScript

// 스타일 값 구하기
console.log('font-size: ', $('#wrap').css('font-size'));
console.log('다수의 값: ', $('#wrap').css(['font-size', 'width', 'height']));
console.log('width: ', $('#wrap').width(), $('#wrap').css('width'));


// 스타일 값 설정하기
$('#wrap').css('font-size', 15);
$('#wrap').css({
  width: 210,
  height: 210,
  borderColor: 'blue'
});



// 폰트 크기 조절
$('#btnPlus').on('click', function(){
	var $targetEle = $('#wrap');
  var currentSize = parseInt($targetEle.css('font-size')) + 1;
  
  $targetEle.css('font-size', currentSize);
});
$('#btnMinus').on('click', function(){
	var $targetEle = $('#wrap');
  var currentSize = parseInt($targetEle.css('font-size')) - 1;
  
  $targetEle.css('font-size', currentSize);
});