JQuery Change CSS 동적으로 - 쉽게!

키 테이크 아웃

jQuery는 .css () 함수를 사용하여 웹 사이트에서 CSS 스타일을 동적으로 변경하는 쉬운 방법을 제공하여 색상, 플로트, 배경색 등과 같은 특정 속성을 수정합니다. 기존 CSS 스타일을 수정하는 것 외에도 JQuery는 .removeClass () 메소드를 통해 스타일을 제거 할 수 있으며, 패딩 또는 마진과 같은 현재 값을 기반으로 기존 스타일의 확장을 허용합니다. 여러 CSS 속성을 jQuery를 사용하여 동시에 변경할 수 있으며, 현재 값에 따라 CSS 클래스를 추가, 제거 또는 토글을 추가, 제거 또는 토글을 추가하거나 제거 또는 토글 할 수도 있습니다. CSS 기능 데모 웹 사이트 스타일을 동적으로 변경하는 것이 이제 웹을 인수하는 열풍입니다! 이 짧지 만 달콤한 게시물에서는 jQuery를 사용하여 간단하지만 효과적인 CSS 트릭을 수행하는 방법을 설명합니다. 이것은 당신이 열렬한 jQuery 개발자들에게 반드시 알아야합니다! 특정 CSS 요소를 변경하십시오 jQuery로 CSS를 변경하는 것은 정말 쉽습니다. 이것은 .css () 함수의 형식입니다.

다음은 몇 가지 일반적인 예입니다.

<span>$('jQuery selector').css({"css property name":"css property value"});</span>

로그인 후 복사

jQuery css 명령 //change paragraph text colour to green $('p').css({"color":"green"}); //float all divs with class .left $('div.left').css('float'); //change all elements with class .bg-red to have a red background $('.bg-red').css({"background-color":"red"});를 중첩하십시오 jQuery가 다중 단어 속성의 CSS 및 DOM 형식을 동일하게 해석 할 수 있다는 것을 아는 것은 편리합니다. 이것은 당신에게 많은 시간을 절약 할뿐만 아니라 더 예쁘게 보입니다!
정확히 동일합니다.

CSS 스타일을 제거하십시오 CSS 스타일을 제거하는 두 가지 주요 방법에는 크게 차이가 없습니다. 1. 페이지 또는 요소와 관련된 클래스를 제거 할 수 있습니다.

newimg<span>.css({'background-image': 'url('+newimgsrc+')'});
</span>newimg<span>.css({'position': 'absolute'});
</span>newimg<span>.css({'height': '70px'});
</span>newimg<span>.css({'width': '200px'});
</span>newimg<span>.css({'top': '68px'});
</span>newimg<span>.css({'right': '2px'});</span>

로그인 후 복사

2. 특정 요소에서 CSS 스타일을 직접 제거 할 수도 있습니다.

newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});</span>

로그인 후 복사

이것은 또한 같은 호출에서 클래스를 제거하고 추가하는 멋진 jQuery CSS 트릭입니다.

기존 스타일 값 확장 현재 가치에 따라 스타일을 확장 할 수 있습니다. 예를 들어, 요소의 패딩 왼쪽이 10px 인 경우 다음 코드는 총 25px의 패딩 왼쪽을 초래할 것입니다.

<span>//remove text color from a div
</span><span>$('#mydiv').removeClass('colors');</span>

로그인 후 복사

<span>//remove text color from a div
</span><span>$('#mydiv').css('color', '');</span>

로그인 후 복사

<..> jQuery .css () 함수 속성 //change text color from red to green (classes specified in stylesheet) $('#div').removeClass('red').addClass('green'); 대부분의 열렬한 jQuery 개발자가 알고 있듯이 jQuery 1.4, .css ()는 속성 값으로 함수를 전달할 수 있습니다. 이것은 현재 CSS 값을 반환하여 변경 사항을 결정하는 데 편리합니다.

일반적인 배경 CSS 변경 다음은 배경 CSS 변화의 몇 가지 예입니다.

jQuery 로 CSS를 변경하는 것에 대해 자주 묻는 질문 jQuery를 사용하여 여러 CSS 속성을 한 번에 변경하려면 어떻게해야합니까?

<span>.css( "padding-left", "+=15" )</span>

로그인 후 복사

jQuery를 사용하면 .css () 메소드를 사용하여 여러 CSS 속성을 동시에 변경할 수 있습니다. 이 메소드는 여러 CSS 속성과 새 값을 정의 할 수있는 객체를 수용합니다. 예는 다음과 같습니다.
$ ( "p"). 요소?

예, jQuery는 .addclass () 메소드를 제공하여 선택한 요소에 하나 이상의 클래스를 추가 할 수 있습니다. 이는 CSS 클래스를 사전 정의 한 클래스를 동적으로 적용하려는 경우 특히 유용합니다. 할 수있는 방법은 다음과 같습니다.

<span>$('div.example').css('width', function(index) {
</span>  <span>return index * 50;
</span><span>});</span>

로그인 후 복사

$ ( "P"). addClass ( "Highlight");
이 예에서는“하이라이트”클래스가 모든 단락 요소에 추가됩니다. jQuery를 사용하여 요소에서 CSS 클래스를 제거하려면?

JQuery는 .removeClass () 메소드를 제공하여 선택한 요소에서 하나 이상의 클래스를 제거합니다. 예는 다음과 같습니다.

$ ( "P"). removeClass ( "Highlight");

이 예에서는“하이라이트”클래스가 모든 단락 요소에서 제거됩니다.
jquery를 사용하여 요소에 대한 CSS 클래스를 전환 할 수 있습니까? 존재하거나 제거하십시오. 예는 다음과 같습니다.
$ ( "P"). ToggleClass ( "하이라이트");
이 예에서는“하이라이트”클래스가 모든 단락 요소에 토글링됩니다.

jquery를 사용하여 CSS 속성의 현재 값을 어떻게 얻을 수 있습니까? 속성 이름을 문자열로 전달하면됩니다. 예는 다음과 같습니다.

var color = $ ( "p"). css ( "color");

이 예에서는 첫 번째 단락 요소의 현재 색상이 "색상"변수에 저장됩니다.
jquery를 사용하여 CSS 속성을 사용하여 현재 값을 기준으로 CSS 속성을 변경할 수 있습니까? 방법. 이 기능은 선택한 각 요소에 대해 호출되며 리턴 값은 속성의 새 값으로 사용됩니다. 예는 다음과 같습니다.
$ ( "P"). CSS ( "font-size", function (index, value) {value) parsefloat (value) * 1.2 "px";
});

이 예에서 모든 단락 요소의 글꼴 크기가 20%증가 할 것입니다. 속성?

예, jQuery는 .animate () 메소드를 제공하여 시간이 지남에 따라 CSS 속성을 변경하여 사용자 정의 애니메이션을 만들 수 있습니다. 예는 다음과 같습니다.

$ ( "p"). 애니메이션 ({ "불투명도": 0.5, "font-size": "200%"

}, 2000);
이 예에서 모든 단락 요소의 불투명도와 글꼴 크기는 2 초에 걸쳐 생성 될 것입니다. 호버?
.css ()와 조합하여 .hover () 메소드를 사용하여 마우스 포인터가 요소 위로 떠날 때 CSS 속성을 변경할 수 있습니다. 예는 다음과 같습니다.
$ ( "P"). 호버 (function () {

$ (this) .css ( "색상", "빨간색"); }, function () {

jQuery를 사용하여 클릭에서 CSS 속성을 변경할 수 있습니까? 예는 다음과 같습니다.

$ ( "P"). 클릭 (function () {

$ (this) .css ( "색상", "빨간색"); 클릭 할 때 단락 요소의 색상이 빨간색으로 변경됩니다. jQuery를 사용하여 스크롤에서 CSS 속성을 변경하려면?

사용자가 페이지를 스크롤 할 때 .css ()와 함께 .scroll () 메소드를 사용하여 CSS 속성을 변경할 수 있습니다. 예는 다음과 같습니다.

$ (창) .scroll (function () { 모든 단락 요소의 색상은 페이지를 스크롤 할 때 모든 단락 요소의 색상이 빨간색으로 변경됩니다.

위 내용은 JQuery Change CSS 동적으로 - 쉽게!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!