자바스크립트
웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.
2025.02.22 02:54
jQuery .css() 함수
jQuery .css() 함수는 HTML 요소의 스타일을 설정하거나 가져올 수 있는 함수입니다. 이 함수는 두 가지 방식으로 사용할 수 있습니다.
# 1. 스타일 설정하기
스타일을 설정하는 경우, 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다.
# 2. 스타일 가져오기
스타일을 가져올 때는 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다. 이 경우, 함수는 해당 속성의 값을 반환합니다.
# 3. 여러 스타일 설정하기
여러 스타일을 한 번에 설정할 수 있습니다. 이 경우, 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성과 값의 객체를 전달합니다.
# 4. 스타일 가져오기 (여러 속성)
여러 스타일 속성을 한 번에 가져올 수 있습니다. 이 경우, 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성의 배열을 전달합니다.
jQuery .css() 함수의 내부 구현
jQuery .css() 함수의 내부 구현은 다음과 같습니다.
이 함수는 두 가지 경우를 처리합니다.
1. 스타일 설정: `arguments.length > 1`이면, 함수는 스타일 설정을 처리합니다.
2. 스타일 가져오기: `arguments.length <= 1`이면, 함수는 스타일 가져오기를 처리합니다.
결론
jQuery .css() 함수는 HTML 요소의 스타일을 설정하거나 가져올 수 있는 함수입니다. 이 함수는 두 가지 방식으로 사용할 수 있습니다. 스타일 설정은 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다. 스타일 가져오기는 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다. 이 경우, 함수는 해당 속성의 값을 반환합니다.
[PHP] log - 자연로그
[PHP] each - 배열에서 현재 키와 값 쌍을 반환하고 배열 커서를 이동합니다.
Jquery CSS() 메서드: 스타일 속성 조작하기
- 나우호스팅 21일 전 2025.02.22 02:54
-
12
0
jquery .css()
jQuery .css() 함수
jQuery .css() 함수는 HTML 요소의 스타일을 설정하거나 가져올 수 있는 함수입니다. 이 함수는 두 가지 방식으로 사용할 수 있습니다.
# 1. 스타일 설정하기
스타일을 설정하는 경우, 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다.
#hostingforum.kr
javascript
// HTML 요소 선택
var $div = $('div');
// 스타일 설정
$div.css('background-color', 'red');
$div.css('color', 'white');
# 2. 스타일 가져오기
스타일을 가져올 때는 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다. 이 경우, 함수는 해당 속성의 값을 반환합니다.
#hostingforum.kr
javascript
// HTML 요소 선택
var $div = $('div');
// 스타일 가져오기
var backgroundColor = $div.css('background-color');
console.log(backgroundColor); // 'red'
# 3. 여러 스타일 설정하기
여러 스타일을 한 번에 설정할 수 있습니다. 이 경우, 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성과 값의 객체를 전달합니다.
#hostingforum.kr
javascript
// HTML 요소 선택
var $div = $('div');
// 여러 스타일 설정
$div.css({
'background-color': 'red',
'color': 'white',
'font-size': '24px'
});
# 4. 스타일 가져오기 (여러 속성)
여러 스타일 속성을 한 번에 가져올 수 있습니다. 이 경우, 함수의 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성의 배열을 전달합니다.
#hostingforum.kr
javascript
// HTML 요소 선택
var $div = $('div');
// 여러 스타일 가져오기
var styles = $div.css(['background-color', 'color', 'font-size']);
console.log(styles); // { 'background-color': 'red', 'color': 'white', 'font-size': '24px' }
jQuery .css() 함수의 내부 구현
jQuery .css() 함수의 내부 구현은 다음과 같습니다.
#hostingforum.kr
javascript
css: function( name, value ) {
return arguments.length > 1 ?
this.css( name, value ) :
this.each(function(){
var css = this.style,
target = {},
computedStyle = jQuery.css(this, false, function(name){
target[name] = css[name];
});
if ( computedStyle ) {
jQuery.each(computedStyle, function(name, value){
css[name] = value;
});
}
if ( name ) {
css[name] = value;
}
});
}
이 함수는 두 가지 경우를 처리합니다.
1. 스타일 설정: `arguments.length > 1`이면, 함수는 스타일 설정을 처리합니다.
2. 스타일 가져오기: `arguments.length <= 1`이면, 함수는 스타일 가져오기를 처리합니다.
결론
jQuery .css() 함수는 HTML 요소의 스타일을 설정하거나 가져올 수 있는 함수입니다. 이 함수는 두 가지 방식으로 사용할 수 있습니다. 스타일 설정은 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다. 스타일 가져오기는 첫 번째 인자로 HTML 요소의 선택자 또는 jQuery 객체를 전달하고, 두 번째 인자로 스타일 속성을 지정합니다. 이 경우, 함수는 해당 속성의 값을 반환합니다.
이 게시물에 포함된 라이브러리
[PHP] round - float를 반올림합니다.[PHP] log - 자연로그
[PHP] each - 배열에서 현재 키와 값 쌍을 반환하고 배열 커서를 이동합니다.
댓글목록
등록된 댓글이 없습니다.