JavaScript 또는 JQuery를 사용하여 HTML 요소의 CSS 속성을 변경하는 방법

Question

어떻게 변경할 수 있습니까? CSS ~에서 javascript.

사용 중입니다 jQuery-ui Dialog 그리고 나는 a의 스타일을 바꾸고 싶다 DIV JavaScript에서.

감사

Answer 1

체크 아웃 jQuery 문서. 당신이 원하는 것을 원한다면 거기에있을 것입니다.

어쨌든 요소에 스타일을 추가하려면 css 몇 가지 변형이있는 함수.

$(selector).css(properties);  // option 1
$(selector).css(name, value); // option 2

따라서 "mydiv"의 ID가있는 div가 있고 배경을 빨간색으로 만들고 싶다면

$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red');     // option 2

첫 번째 방법은 한 번에 여러 가지를 설정하면 더 쉽습니다.

현재 설정된 속성을 확인하려면 두 번째 옵션의 변형을 사용하고 값을 생략합니다.

var color = $("div#mydiv").css('background-color');

var를 만들 것입니다 color ~이다 red 예를 들어 이미 위에 설정 한 경우.

당신은 또한 수업을 추가하고 제거 할 수 있습니다.

$(selector).addClass(class_name);
$(selector).removeClass(class_name);

Answer 2

이 답변은 jQuery 없이도 작동합니다.

그래서 당신은 다음과 같은 것이 있습니다.

<style type="text/css">
    .foo { color: Red; }
    .bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>

일부 속성 만 변경하려면 언제든지 사용 요소를 찾을 수 있습니다.

var div = document.getElementById('redtext');

첨부 된 색상 스타일을 기능하고 변경하십시오

div.style.color = 'Green';

대신 빨간색 텍스트를 녹색으로 표시합니다.

DIV에 대한 정의 된 클래스를 다른 스타일 클래스로 변경하려면 다음을 수행 할 수 있습니다.

div.className = 'bar';

DIV를 만드는 것은 이제 클래스 바를 사용하여 이전에 녹색 텍스트를 파란색으로 만듭니다.

Answer 3

jQuery 프레임 워크를 사용하여 요소 스타일을 조작하는 몇 가지 방법이 있습니다. CSS 및 변경 속성과 관련된 문서를 살펴보십시오.

• http://docs.jquery.com/attributes/addclass#class
• http://docs.jquery.com/css

Answer 4

이것을 시도하십시오. 이것은 jQuery 코드입니다.

 $("myDiv").css({"color":"red","display":"block"})

Vanila Javacript를 사용하는 경우 시도해보십시오.

var myDiv = document,getElementById("myDiv");

myDiv.style.display = "block";

myDiv.style.color = "red";