이 문서에서는 jQuery를 사용하여 div에서 CSS를 제거하는 다양한 방법을 보여줍니다.
jQuery를 사용하여 div에서 CSS를 제거하는 방법은 무엇입니까?
div에서 CSS 스타일을 제거하려면 jQuery 내장 속성을 사용하십시오. 사용자가 스타일을 추가하거나 제거할 수 있는 방법에는 인라인과 클래스 사용의 두 가지가 있습니다.
방법 1: Div에서 인라인 CSS 제거
HTML 요소에 적용된 인라인 스타일을 제거하려면 ' 제거 속성() ’ 방식을 사용한다.
요소의 스타일이 거의 필요하지 않을 때 사용됩니다. 아래 단계에 따라 처리하십시오.
1단계: 구조 만들기
HTML 파일에서 ' <사업부> ” 태그를 지정하고 그 안에 여러 HTML 요소를 추가합니다. 예를 들어, ' ”, “ ' 그리고 ' ” 태그는 아래 코드에서 사용됩니다.
< h1 > 안녕하세요 Linuxhint 사용자 < / h1 >
< h2 > Linuxhint는 천국의 장소입니다 < / h2 >
< 피 > 프로그래밍 언어와 관련된 쿼리. < / 피 >
< / 사업부 >
< 단추 > Div용 스타일 리무버 < / 단추 >
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
출력에는 div 및 버튼의 HTML 구조가 표시됩니다.
2단계: 인라인 스타일 추가
div 여는 태그 내에서 ' 스타일 ” 속성을 지정하고 일부 CSS 속성을 적용하여 요소를 눈에 잘 띄고 매력적으로 만듭니다.
색상:다크마젠타;
배경색: 미디엄 아쿠아마린;
여백: 20px;
패딩: 30px;' >
< h1 >안녕하세요 Linuxhint 사용자< / h1 >
< h2 >Linuxhint는 천국입니다< / h2 >
< 피 >프로그래밍 언어와 관련된 쿼리.< / 피 >
< / 사업부 >
< br >
< 단추 > 스타일 제거하다 ~을 위한 사업부< / 단추 >
위 코드의 출력은 다음과 같습니다.
출력에서 인라인 스타일이 div 요소에만 적용되었음을 확인합니다.
3단계: jQuery를 사용하여 인라인 CSS 제거
스타일 속성을 제거하기 위해 부모 함수는 ' 문서 ' 이다 ' 준비가 된 '. 아래 코드에서 사용자가 ' 단추 '. 그런 다음 이 함수는 페이지에 있는 모든 div 요소를 선택하고 ' 제거.Attr() ' 방법:
$ ( 문서 ) .준비가 된 ( 기능 ( ) {
$ ( '단추' ) .딸깍 하는 소리 ( 기능 ( ) {
$ ( '사업부' ) .removeAttr ( '스타일' ) ;
} ) ;
} ) ;
< / 스크립트 >
jQuery 코드를 추가하면 웹 페이지가 다음과 같이 작동합니다.
위의 'gif'는 버튼을 클릭하면 div에 적용된 스타일이 제거되는 것을 보여줍니다.
방법 2: Div에서 클래스 CSS 제거
HTML 요소의 스타일을 지정하는 두 번째 방법은 ' 수업 '. 그런 다음 ' <스타일> ” 태그 또는 별도의 “ CSS 파일 '. 이러한 스타일은 jQuery를 사용하여 제거할 수도 있습니다. 아래 단계를 따르십시오.
1단계: Div 요소에 클래스 할당
HTML 파일에서 클래스 속성을 ' <사업부> ' 요소. 또한 'remover'라는 id를 ' <버튼> ” 태그:
< h1 >안녕하세요 Linuxhint 사용자< / h1 >
< h2 >Linuxhint는 천국입니다< / h2 >
< 피 >프로그래밍 언어와 관련된 쿼리.< / 피 >
< / 사업부 >
< 단추 ID = '제거하다' > 스타일 제거 < / 단추 >
다음으로 ' <스타일> ” 태그를 지정하고 div 클래스 이름 “을 선택합니다. 스타일링 ” 및 div 요소에 적용되는 CSS 속성을 입력합니다.
< 스타일 >.스타일링 {
색상 :골든로드;
배경- 색상 : 바다 녹색;
여백: 20px;
패딩: 30px;
}
< / 스타일 >
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
출력은 스타일이 div 요소에 적용되었음을 표시합니다.
2단계: jQuery를 추가하여 CSS 스타일링 제거
'에서 <스크립트> ” 태그는 위의 방법과 동일한 jQuery 코드를 추가합니다. jQuery ' 제거클래스() ” 메서드는 “ 스타일링 버튼을 클릭할 때 'div' 요소가 할당되는 ” 클래스:
$ ( 문서 ) .준비가 된 ( 기능 ( ) {
$ ( '단추' ) .딸깍 하는 소리 ( 기능 ( ) {
$ ( '사업부' ) .removeClass ( '스타일링' ) ;
} ) ;
} ) ;
< / 스크립트 >
위의 코드를 추가하면 웹 페이지가 다음과 같이 작동합니다.
위의 'gif'는 클래스에 입력된 스타일이 버튼 클릭으로 제거되는 것을 보여줍니다.
결론
div에서 CSS를 제거하려면 ' 제거.Attr() ' 그리고 ' 제거클래스() ” 방법을 사용할 수 있습니다. “ 제거.Attr() ' 제거 ' 스타일 ” 선택한 요소의 속성입니다. 한편, “ 제거클래스() ”는 해당 요소에 스타일을 적용하는 데 활용되고 있던 선택된 요소 클래스를 제거합니다. 이 기사는 jQuery를 사용하여 div에서 CSS를 제거하는 방법을 성공적으로 보여주었습니다.