웹 프론트엔드 JS 튜토리얼 jQuery CSS() 메서드는 기존 CSS style_jquery를 변경합니다.

jQuery CSS() 메서드는 기존 CSS style_jquery를 변경합니다.

May 16, 2016 pm 04:39 PM
CSS 스타일

JQuery 시작하기 예: CSS() 메서드를 사용하여 기존 CSS 스타일 시트를 변경합니다. css() 메서드는 다양하게 사용됩니다. 그 중 하나는 쉼표로 구분된 스타일 속성과 스타일 값이라는 두 가지 입력 매개변수를 허용합니다. 예를 들어 링크 색상을 변경하려면 다음과 같은 코드를 작성하면 됩니다.

$("#61dh a").css('color','#123456'); 
//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 
//.css(‘color','#123456');表示把颜色设为'#123456'
로그인 후 복사

여러 스타일 속성을 변경해야 하는 경우 먼저 속성 변수를 정의한 다음 css() 메서드에 직접 할당할 수 있습니다.

var mycss = { 
background: '#EEE', 
width: '478px', 
margin: '10px 0 0', 
padding: '5px 10px', 
border: '1px solid #CCC' 
}; 
$("#result").css(divcss);
로그인 후 복사

위 코드는 먼저 외부 CSS 파일을 생성하는 것과 유사한 CSS 스타일 속성 변수 "mycss"를 정의한 후 css() 메소드를 통해 ID가 '#result'인 DIV에 속성을 할당합니다.

또한 jQuery에서 제공하는 css() 메서드를 사용하면 요소의 CSS 속성 값도 볼 수 있습니다. 예를 들어 링크의 색상을 보려면 코드는 다음과 같습니다.

$("#61dh a").css("color")
로그인 후 복사

첫 번째 예와 비슷하지만 여기서는 하나의 매개변수(스타일 속성)만 전달됩니다.

마지막으로 소개하고 싶은 것은 마우스가 교차된 후 링크 스타일(예: 색상)을 설정하는 방법입니다. jQuery 이벤트 클래스 메서드인 hover()를 사용해야 합니다. hover() 메서드는 마우스가 위로 움직일 때 하나, 마우스가 위로 움직일 때 다른 하나, 두 가지 함수를 정의해야 한다는 점은 주목할 가치가 있습니다. 구체적인 방법은 다음과 같습니다.

$("#61dh a").css('color','#123456'); 
$("#61dh a").hover(function(){ 
$(this).css('color','#999'); 
}, 
function(){ 
$(this).css('color','#123456'); 
}); 
//hover()方法的两个函数使用用逗号分隔
로그인 후 복사

아마도 당신은 똑똑하고 이 방법이 간단하지 않다는 것을 알아차렸을 것입니다. 하하, 실제로 jQuery hover() 방법은 CSS 스타일을 변경하는 데 사용되지 않습니다. 실제 응용에서는 마우스 오버 시 링크 스타일을 변경하기 위해 CSS를 추가/제거하는 방법을 사용하는 것이 좋습니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML과 CSS를 사용하여 슬라이드쇼 레이아웃 페이지를 만드는 방법 HTML과 CSS를 사용하여 슬라이드쇼 레이아웃 페이지를 만드는 방법 Oct 16, 2023 am 09:07 AM

HTML 및 CSS를 사용하여 슬라이드 레이아웃 페이지를 만드는 방법 소개: 슬라이드 레이아웃은 현대 웹 디자인에서 널리 사용되며 정보나 그림을 표시할 때 매우 매력적이고 대화형입니다. 이 문서에서는 HTML과 CSS를 사용하여 슬라이드 레이아웃 페이지를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTML 레이아웃 구조 먼저 슬라이드 컨테이너와 여러 슬라이드 항목을 포함하는 HTML 레이아웃 구조를 만들어야 합니다. 코드는 다음과 같습니다: <!DOCTYPEhtml&

사용 방법:nth-child(-n+5) 의사 클래스 선택기를 사용하여 위치가 5보다 작거나 같은 하위 요소의 CSS 스타일을 선택합니다. 사용 방법:nth-child(-n+5) 의사 클래스 선택기를 사용하여 위치가 5보다 작거나 같은 하위 요소의 CSS 스타일을 선택합니다. Nov 20, 2023 am 11:52 AM

사용 방법:nth-child(-n+5) 의사 클래스 선택기를 사용하여 위치가 5보다 작거나 같은 하위 요소의 CSS 스타일을 선택합니다. CSS에서 의사 클래스 선택기는 다음과 같은 강력한 도구입니다. 특정 선택 방법을 통해 선택됩니다. HTML 문서의 특정 요소입니다. 그 중 :nth-child()는 특정 위치의 자식 요소를 선택할 수 있는 일반적으로 사용되는 가상 클래스 선택자입니다. :nth-child(n)은 HTML의 n번째 자식 요소와 일치할 수 있고, :nth-child(-n)는 일치할 수 있습니다.

HTML과 CSS를 사용하여 간단한 채팅 페이지 레이아웃을 구현하는 방법 HTML과 CSS를 사용하여 간단한 채팅 페이지 레이아웃을 구현하는 방법 Oct 18, 2023 am 08:42 AM

HTML과 CSS를 사용하여 간단한 채팅 페이지 레이아웃을 구현하는 방법 현대 기술이 발전하면서 사람들은 점점 더 인터넷을 통해 통신하고 통신합니다. 웹 페이지에서 채팅 페이지는 매우 일반적인 레이아웃 요구 사항입니다. 이 글에서는 HTML과 CSS를 사용하여 간단한 채팅 페이지 레이아웃을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 HTML 파일을 만들어야 합니다. 텍스트 편집기를 사용할 수 있습니다. index.html을 예로 들어 먼저 기본 HTML을 만듭니다.

HTML과 CSS를 사용하여 상세한 페이지 레이아웃을 구현하는 방법 HTML과 CSS를 사용하여 상세한 페이지 레이아웃을 구현하는 방법 Oct 20, 2023 am 09:54 AM

HTML과 CSS를 사용하여 상세한 페이지 레이아웃을 구현하는 방법 HTML과 CSS는 웹 페이지를 만들고 디자인하는 기본 기술입니다. 이 두 가지를 적절하게 사용하면 다양하고 복잡한 웹 페이지 레이아웃을 구현할 수 있습니다. 이 문서에서는 HTML과 CSS를 사용하여 자세한 페이지 레이아웃을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. HTML 구조 만들기 먼저 페이지 콘텐츠를 배치할 HTML 구조를 만들어야 합니다. 다음은 기본 HTML 구조입니다: <!DOCTYPEhtml&g

HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법 HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법 Oct 25, 2023 am 10:42 AM

HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법 현대 웹 디자인에서 반응형 레이아웃은 매우 중요한 기술입니다. HTML과 CSS를 사용하면 다양한 화면 크기의 장치에 적응하는 반응형 카드 월 레이아웃을 만들 수 있습니다. HTML과 CSS를 사용하여 간단한 반응형 카드 월 레이아웃을 만드는 방법을 자세히 살펴보겠습니다. HTML 부분: 먼저 HTML 파일의 기본 구조를 설정해야 합니다. 순서가 지정되지 않은 목록(<ul>)을 사용할 수 있으며

HTML과 CSS를 사용하여 반응형 음악 플레이어 레이아웃을 만드는 방법 HTML과 CSS를 사용하여 반응형 음악 플레이어 레이아웃을 만드는 방법 Oct 19, 2023 am 10:02 AM

HTML과 CSS를 사용하여 반응형 뮤직 플레이어 레이아웃을 만드는 방법 오늘날 정보 기술이 빠르게 발전하는 시대에 음악은 엔터테인먼트의 한 형태로 사람들의 삶에 깊숙이 침투해 왔습니다. 더 나은 음악 경험을 위해 많은 웹사이트와 애플리케이션에서 온라인 음악 플레이어를 제공합니다. 이 문서에서는 HTML 및 CSS를 사용하여 반응형 음악 플레이어 레이아웃을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 HTML을 사용하여 기본 구조를 만들어야 합니다. 다음은 간단한 HTML 레이아웃 예입니다: <!

HTML에 CSS 스타일을 삽입하는 방법 HTML에 CSS 스타일을 삽입하는 방법 Sep 20, 2023 am 11:37 AM

HTML에 CSS 스타일을 삽입하는 방법에는 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트가 있습니다. 세부 소개: 1. 인라인 스타일은 CSS 스타일을 HTML 태그에 직접 작성하고 스타일 속성을 통해 요소의 스타일을 설정하는 것을 말합니다. 이 방법의 장점은 간단하고 직관적이며 빠르게 스타일을 설정할 수 있다는 것입니다. 그러나 그 스타일은 HTML 구조와 긴밀하게 결합되어 유지 관리 및 재사용이 어렵고 동시에 스타일을 수정해야 하는 경우 전체 HTML 문서를 탐색해야 한다는 단점도 있습니다. 2. 내부 스타일 시트 등

PHP 정규 표현식 작동: CSS 스타일 일치 PHP 정규 표현식 작동: CSS 스타일 일치 Jun 22, 2023 pm 06:31 PM

웹 개발에 있어 CSS 스타일 시트는 HTML 요소의 스타일을 편리하게 설정할 수 있는 필수 요소입니다. 그러나 때때로 큰 CSS 파일에서 특정 스타일을 추출해야 하는 경우 PHP의 정규식 기능을 사용하여 일치시킬 수 있습니다. 이 기사에서는 실제로 PHP 정규 표현식을 사용하여 CSS 스타일을 일치시키는 방법을 소개합니다. 먼저 CSS 스타일의 기본 구조를 살펴보겠습니다: selector{property:value;pro

See all articles