jQuery / Reference / .css()
개요
.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가할 수 있습니다.
문법 1 - 속성의 값 가져오기
.css( propertyName )
- propertyName의 속성값을 가져옵니다. 예를 들어 다음은 h1 요소의 스타일 중 color 속성의 값을 가져옵니다.
$( "h1" ).css( "color" );
문법 2 - 속성 추가하기
.css( propertyName, value )
- style 속성을 추가합니다. 예를 들어 다음은 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 바꿉니다.
$( "h1" ).css( "color", "green" );
- 여러 속성을 변경하고 싶다면 다음과 같이 합니다.
.css( {
propertyName1: value1,
propertyName2: value2,
propertyName3: value3
} )
예제 1 - 속성의 값 가져오기
- h1 요소의 color 속성의 값을 출력합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
h1 {color: red;}
</style>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
var color = $( "h1" ).css( "color" );
$( "p" ).html( "Color is " + color );
});
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
<p></p>
</body>
</html>
예제 2 - 속성 추가하기
- h1 요소의 글자색을 녹색으로 만듭니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$( "h1" ).css( "color", "green" );
});
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
</body>
</html>
- h1 요소의 글자색을 녹색으로 만들고, 안쪽 여백과 테두리를 추가합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
font-family: Consolas, monospace;
font-size: 20px;
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$( document ).ready( function() {
$( 'h1' ).css( {
color: 'green',
padding: '20px',
border: '5px solid #dadada'
} );
} );
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
</body>
</html>
참고
- HTML 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가할 때는 .attr()을 사용합니다.
jQuery / Reference / .slideDown()
개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Reference / .insertBefore()
개요 .insertBefore()는 특정 요소 앞에 요소를 추가하거나 이동시킵니다. 문법 .insertBefore( target ) 예제 1 p 요소 앞에 <h1>Hello</h1>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...
:button은 type이 button인 요소를 선택하는 선택자입니다.
jQuery / Reference / .remove()
개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .prepend()
개요 .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
jQuery / Reference / .append()
개요 .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
개요 .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. $( 'h1' ).has( 'span' ) 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script ...
jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.
개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .after( content ) 예제 1 h1 요소 뒤에 Hello World!를 내용으로 갖는 p 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...
jQuery / Reference / .unwrap()
개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...