jquery로 div에서 스타일 속성 추가 및 제거
작업중인 프로젝트를 상속했고 일부 jquery 애니메이션을 업데이트하고 있습니다 (jquery로 거의 연습하지 않음).
스타일 속성을 추가하고 제거해야하는 div가 있습니다. 다음은 div입니다.
<div id='voltaic_holder'>
애니메이션의 한 지점에서 스타일을 추가해야합니다.
<div id='voltaic_holder' style='position:absolute;top:-75px'>
나는 주변을 수색하고 .removeAttr()
방법을 찾았 지만 그것을 추가하는 방법이나 심지어는 그것의 원격 부분을 볼 수 없습니다 (상단 : -75px 만 해당).
감사,
다음 중 하나를 수행 할 수 있습니다.
각 스타일 속성을 개별적으로 설정합니다.
$("#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")
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", "");
jQuery를 사용하는 경우 CSS 를 사용하여 CSS 를 추가하십시오.
$("#voltaic_holder").css({'position': 'absolute',
'top': '-75px'});
CSS 속성을 제거하려면
$("#voltaic_holder").css({'position': '',
'top': ''});
이를 처리하는 쉬운 방법 (그리고 가장 좋은 HTML 솔루션)은 사용하려는 스타일을 가진 클래스를 설정하는 것입니다. 그런 다음 addClass () 및 removeClass () 또는 toggleClass () 를 사용하는 간단한 문제입니다 .
$('#voltaic_holder').addClass('shiny').removeClass('dull');
또는
$('#voltaic_holder').toggleClass('shiny dull');
Anwer는 여기에 동적으로 jQuery를 사용하여 텍스트 정렬에 대한 스타일을 추가하는 방법
jQuery 의 .css 메소드의 경우 ! important 규칙이 적용되지 않습니다.
이 경우 .attr 함수를 사용해야 합니다.
예 : 아래와 같이 스타일을 추가하려면 :
<div id='voltaic_holder' style='position:absolute;top:-75px !important'>
다음을 사용해야합니다.
$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");
도움이되기를 바랍니다.
J 쿼리를 사용하여 div에서 스타일 속성을 제거합니다.
$("#TableDiv").removeAttr("style");
J 쿼리를 사용하여 div에 스타일 추가 :
$("#TableDiv").attr("style", "display: none;");
html을 사용하여 스타일 추가 :
<div class="row" id="TableDiv" style="display: none;">
</div>
도움이 되길 바랍니다 :)
참고 URL : https://stackoverflow.com/questions/5394951/adding-and-removing-style-attribute-from-div-with-jquery
'programing' 카테고리의 다른 글
두 가지 색상 테두리 (0) | 2020.09.02 |
---|---|
Python 2.7 : 파일로 인쇄 (0) | 2020.09.02 |
C auto 키워드는 어디에 사용됩니까? (0) | 2020.09.02 |
스프링 부트에서 휴식을 위해 기본 URL을 설정하는 방법은 무엇입니까? (0) | 2020.09.02 |
매개 변수가 너무 많은 (6 개 이상) 메서드를 리팩터링하는 가장 좋은 방법은 무엇입니까? (0) | 2020.09.02 |