JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="wrap" style="color:#000;">
  hello
</div>

CSS

#wrap{border:1px solid red;}

JavaScript

var wrapEle = document.getElementById('wrap');
var $wrapEle = $('#wrap');


/* 스타일 접근 방법 */

// JS - 인라인 스타일 접근 방법
console.log('js: ',wrapEle.style.color);
// JS - 인라인 스타일이 아닌 속성에 접근하는 경우
console.log('js: ',window.getComputedStyle(wrapEle).border);

console.log('--------------------------------');

// jQuery - 스타일 접근 방법
console.log('jQuery: ',$wrapEle.css('color'));
console.log('jQuery: ',$wrapEle.css('border'));



/* 스타일 속성 지정 */

// JS
//wrapEle.style.font-size = '10px';
// wrapEle.style.fontSize = 6;
wrapEle.style.fontSize = '10px';

// jQuery
$wrapEle.css('font-size', 11);
// 따옴표 없이 쓸때는 js와 동일하게 카멜케이스 사용
$wrapEle.css({
  fontSize: 20
});


/* 스타일 다수의 속성 지정 */

// JS
wrapEle.style.color = 'green';
wrapEle.style.fontSize = '10px';

// jQuery
$wrapEle.css({
  'font-size': 20,
  'color': 'red'
});