jquery로 div에서 스타일 속성 추가 및 제거


103

작업중인 프로젝트를 상속했고 일부 jquery 애니메이션을 업데이트하고 있습니다 (jquery로 거의 연습하지 않음).

스타일 속성을 추가하고 제거해야하는 div가 있습니다. 다음은 div입니다.

<div id='voltaic_holder'>

애니메이션의 한 지점에서 스타일을 추가해야합니다.

<div id='voltaic_holder' style='position:absolute;top:-75px'>

나는 주변을 수색하고 .removeAttr()방법을 찾았 지만 그것을 추가하는 방법이나 심지어는 그것의 원격 부분을 볼 수 없습니다 (상단 : -75px 만 해당).

감사,


$('voltaic_holder').style = null혹시? 스타일에는 자체 전체 개체 트리가 있습니다. 대부분의 다른 속성은 키 = 값 유형 데이터입니다.
Marc B

답변:


246

다음 중 하나를 수행 할 수 있습니다.

각 스타일 속성을 개별적으로 설정합니다.

$("#voltaic_holder").css("position", "relative");

한 번에 여러 스타일 속성 설정 :

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

특정 스타일 제거 :

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

전체 스타일 속성을 제거하십시오.

$("#voltaic_holder").removeAttr("style")

한 줄에 하나 이상의 CSS 속성을 추가 할 수 있습니까? 아니면 다음과 같이 각 스타일 속성에 대해 하나를 수행해야합니까? $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");
ItsPronounced

3
그에 대한 대답은 가능합니다. .css () 함수에서 객체 리터럴을 사용하십시오. $ ( 'foo'). css ({ 'height': '30px', 'width': '50px'});
Richard Neil Ilagan 2011 년

@AdamAlbrecht $ ( "# voltaic_holder"). removeAttr ( "style")에서 기본적으로 새로 추가 된 모든 적용된 스타일을 제거하기 때문에 추가 한 특정 스타일을 제거하려면 어떻게해야합니까?
3 규칙

21

voltaic_holder범위 의 스타일 속성을 완전히 제거하려면 다음을 수행하십시오.

$("#voltaic_holder").removeAttr("style");

속성을 추가하려면 다음을 수행하십시오.

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

상단 스타일 만 제거하려면 다음과 같이하십시오.

$("#voltaic_holder").css("top", "");

15

jQuery를 사용하는 경우 CSS 를 사용하여 CSS 를 추가하십시오.

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

CSS 속성을 제거하려면

$("#voltaic_holder").css({'position': '',
    'top': ''});

thos 속성이 없기 때문에 voltaic_holder 요소에서 position 또는 top 속성을 제거 할 수 없습니다. 스타일 속성에 정의 된 CSS 속성입니다.
Peter Olson

@ 피터-도! 사용하도록 편집.css
justkt

10

이를 처리하는 쉬운 방법 (그리고 가장 좋은 HTML 솔루션)은 사용하려는 스타일을 가진 클래스를 설정하는 것입니다. 그런 다음 addClass ()removeClass () 또는 toggleClass () 를 사용하는 간단한 문제입니다 .

$('#voltaic_holder').addClass('shiny').removeClass('dull');

또는

$('#voltaic_holder').toggleClass('shiny dull');


2

jQuery 의 .css 메소드의 경우 ! important 규칙이 적용되지 않습니다.

이 경우 .attr 함수를 사용해야 합니다.

예 : 아래와 같이 스타일을 추가하려면 :

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

다음을 사용해야합니다.

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

도움이되기를 바랍니다.


1

J 쿼리를 사용하여 div에서 스타일 속성을 제거합니다.

$("#TableDiv").removeAttr("style");

J 쿼리를 사용하여 div에 스타일 추가 :

$("#TableDiv").attr("style", "display: none;");

html을 사용하여 스타일 추가 :

<div class="row" id="TableDiv" style="display: none;">
</div>

도움이 되길 바랍니다 :)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.