jQuery를 사용하여 요소에 스타일 추가

오늘의 게시물은 jQuery를 사용하여 요소에 스타일을 추가하는 방법에 대해 설명합니다.

.css()를 사용하여 jQuery를 사용하여 요소에 스타일 추가

jQuery는 일치하는 요소 집합에 대해 하나 이상의 CSS 속성을 설정하기 위해 .css()를 사용하여 요소에 스타일을 추가하는 간단한 방법을 제공합니다. 이 접근 방식은 속성 이름과 값을 별도의 매개 변수 또는 키-값 쌍의 단일 개체로 사용할 수 있습니다.

통사론:

.css(propertyName, value)

어디:

• propertyName은 CSS 속성 이름을 나타내는 문자열입니다.
• 값은 속성에 대해 설정할 값을 나타내는 문자열 또는 숫자입니다.

jQuery는 다중 단어 속성의 CSS 및 DOM 형식을 동일하게 해석할 수 있습니다. 예를 들어 jQuery는 다음에 대한 올바른 값을 이해합니다.

.css({'background-color': '#fefefe', 'border-right': '2px solid #eee'})

그리고

.css({backgroundColor: '#fefefe', borderRight: 'solid 2px #eee'})

DOM 표기법에서 속성 이름 주변의 인용 부호는 선택적으로 사용할 수 있습니다. CSS 표기법에서는 이름 내부의 하이픈 때문에 필요합니다. .css()가 세터로 사용되는 동안 jQuery는 요소의 스타일 속성을 수정합니다.

스타일 속성 값을 빈 문자열로 업데이트/설정하면(예: $( "#div-1" ).css( "color", "" ), 속성이 이미 적용된 경우 요소에서 속성이 제거됩니다. jQuery의 .css() 메서드를 통해 HTML 스타일 속성에서 직접 또는 스타일 속성의 직접 DOM 조작을 통해.

결과적으로 해당 속성에 대한 요소의 스타일이 적용된 값으로 되돌아갑니다. 따라서 이 방법은 이전에 수행한 스타일 변경을 취소할 수 있습니다. 게다가 .css()는 중요한 선언을 지원하지 않습니다.

setter .css()는 자동으로 속성 이름 접두사를 처리합니다. .css()에 대한 .css() 문서에 대한 자세한 정보를 찾을 수 있습니다.

다음 예를 통해 이해해 봅시다.

예제 코드(HTML):

<div>Hello World!</div>

예제 코드(자바스크립트):

$('div').css({
  display: 'block',
  color: 'blue',
})

스타일이 적용되지 않은 위의 예제 코드에서 div 태그를 설명했습니다. jQuery를 통해 div의 색상을 blue로 설정하고 block으로 표시합니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행해 봅니다. 아래 결과가 표시됩니다.

CSS 속성을 추가하기 전에 다음과 같은 결과가 표시됩니다.

CSS 속성을 추가하면 다음과 같이 됩니다.

위 예제 코드의 라이브 데모는 여기에서 볼 수 있습니다.