어떻게 jQuery를 사용하여 CSS를 변경하려면?

해결법

1.속성 이름은 문제가 있음을 제안하는 사람들을 무시합니다. JQuery와 API 문서는 명시 적으로 하나 표기법이 허용한다고 : http://api.jquery.com/css/

속성 이름은 문제가 있음을 제안하는 사람들을 무시합니다. JQuery와 API 문서는 명시 적으로 하나 표기법이 허용한다고 : http://api.jquery.com/css/

실제 문제는이 라인에 닫는 중괄호 누락 것입니다 :
```
$("#myParagraph").css({"backgroundColor":"black","color":"white");
```
이로 변경 :
```
$("#myParagraph").css({"backgroundColor": "black", "color": "white"});
```
다음은 작업 데모는 다음과 같습니다 http://jsfiddle.net/YPYz8/

(초기화) $; 초기화 기능 () { $ ( "H1") CSS ( "backgroundColor로", "노랑").; . $ ( "#의 myParagraph") CSS ({ "의 backgroundColor": "검은 색", "색상": "흰색"}); $ ( "경계.") CSS ( "경계", "1 픽셀의 검은 색."); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">

헤더 이 어떤 단락 텍스트는
2.당신은 하나를 수행 할 수 있습니다 :

당신은 하나를 수행 할 수 있습니다 :
```
$("h1").css("background-color", "yellow");
```
또는:
```
$("h1").css({backgroundColor: "yellow"});
```
3.답변 중 일부는 잘못된 정보를 제공하고 있기 때문에, 약간까지 일을 지우려면 :

답변 중 일부는 잘못된 정보를 제공하고 있기 때문에, 약간까지 일을 지우려면 :

JQuery와 .CSS () 메소드는 많은 경우 중 하나 DOM 또는 CSS 표기법의 사용을 할 수 있습니다. 따라서,의 backgroundColor 및 배경 색상 모두 해낼 것입니다.

당신이 인수에 .css ()를 호출 할 때 또한 인수가 될 수 있는지에 관해서는 두 가지 선택이있다. 그들 중 어느 하나의 CSS 속성 및 값을 나타내는 2 개 콤마로 구분 된 문자열이 될 수 있거나, CSS 속성 및 값 중 하나 이상의 키 값 쌍을 포함하는 자바 객체가 될 수있다.

결론적으로 코드를 가진 유일한 것은 잘못된}이 누락 된 것입니다. 줄 읽어야합니다 :
```
$("#myParagraph").css({"backgroundColor":"black","color":"white"});
```
당신은 중괄호를 생략 할 수는 없지만 backgroundColor로 색상 주위에서 따옴표를 생략 할 수있다. 당신은 배경 색을 사용하는 경우가 있기 때문에 하이픈의 주위에 따옴표를 넣어해야합니다.

기존 키워드를 인용하지 않는 경우 문제가 발생할 수 있기 때문에 일반적으로, 당신의 자바 스크립트 객체를 인용하는 것은 좋은 습관입니다.

마지막으로 참고하고있는 jQuery를 .ready () 메서드에 대한
```
$(handler);
```
와 동의어이다 :
```
$(document).ready(handler);
```
뿐만 아니라 제하지 않는 것이 좋습니다 양식으로.

초기화가 해당 인스턴스의 핸들러이기 때문에 $ (초기화)이 완전히 올바른지이 의미합니다. DOM을가 구축 될 때, 초기화 해고 될 것이다.
4.당신이 jQuery를하여 여러 CSS 속성을 사용하는 경우 당신은 시작과 끝 부분에 중괄호를 사용해야합니다. 당신은 끝 중괄호가 누락되었습니다.

당신이 jQuery를하여 여러 CSS 속성을 사용하는 경우 당신은 시작과 끝 부분에 중괄호를 사용해야합니다. 당신은 끝 중괄호가 누락되었습니다.
```
function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}
```
이 jQuery를 CSS 선택기 튜토리얼을 볼 수있다.
5..CSS () 메소드는 매우 간단 찾아 설정 CSS 속성과 .animate 같은 다른 방법 (함께), 당신은 귀하의 사이트에 멋진 효과를 만들 수 있습니다 할 수 있습니다.

.CSS () 메소드는 매우 간단 찾아 설정 CSS 속성과 .animate 같은 다른 방법 (함께), 당신은 귀하의 사이트에 멋진 효과를 만들 수 있습니다 할 수 있습니다.

가장 간단한 형태에서, .CSS () 메소드는 정합 소자들의 특정 세트에 대해 하나의 CSS 속성을 설정할 수있다. 당신은 문자열로 재산과 가치를 전달하고 요소의 CSS 속성이 변경됩니다.

$ ( '. 예를 들어') CSS ( '배경 색', '빨간색').;

이 '예'의 클래스를 가지고 있던 요소에 '빨간색'에 '배경색'속성을 설정합니다.

하지만 당신은 한 번에 하나 개의 속성을 변경 국한되지 않습니다. 물론, 각이 한 번에 하나의 속성을 변경, 동일 jQuery를 개체의 무리를 추가 할 수 있습니다, 그러나 이것은 DOM 여러 불필요한 호출을하고 반복되는 코드를 많이합니다.

대신에 .css () 메소드 키 / 값 쌍으로 속성과 값을 포함하는 자바 스크립트 객체 전달할 수 있습니다. 이 방법은, 각 속성은 다음 번에 모든 jQuery 오브젝트에 설정됩니다.
```
$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});
```
이것은 '.EXAMPLE'요소에 이러한 CSS 속성을 모두 변경됩니다.
6.그냥 CSS의 방법으로 값을 숫자를 사용할 때 아포스트로피 외부에 추가하고 아포스트로피에 CSS 장치를 추가 할 필요가 있음을 추가하고 싶었다.

그냥 CSS의 방법으로 값을 숫자를 사용할 때 아포스트로피 외부에 추가하고 아포스트로피에 CSS 장치를 추가 할 필요가 있음을 추가하고 싶었다.
```
$('.block').css('width',50 + '%');
```
또는
```
var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });
```

7.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

8.. $ ( ". radioValue") CSS ({ "배경색" "- 웹킷 선형 구배 (# E9E9E9, RGBA (255, 255, 255, 0.43137254901960786) # E9E9E9)", "컬러": "# 454545 ","패딩 ":"8px "});

. $ ( ". radioValue") CSS ({ "배경색" "- 웹킷 선형 구배 (# E9E9E9, RGBA (255, 255, 255, 0.43137254901960786) # E9E9E9)", "컬러": "# 454545 ","패딩 ":"8px "});
9.() {(기능 $ ( '. 경계') $. CSS를 ({ "국경": "1 픽셀의 고체 #EFEFEF" "여백": "0 자동차" "폭": "80 %" }); $ ( 'H1'). CSS ({ "여백 왼쪽": "10px" }); $ ( '#의 myParagraph'). CSS ({ "마진이 왼쪽": "10px"을, "글꼴 - 가족": "산세 리프" }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">

헤더 이 어떤 단락 텍스트는

() {(기능 $ ( '. 경계') $. CSS를 ({ "국경": "1 픽셀의 고체 #EFEFEF" "여백": "0 자동차" "폭": "80 %" }); $ ( 'H1'). CSS ({ "여백 왼쪽": "10px" }); $ ( '#의 myParagraph'). CSS ({ "마진이 왼쪽": "10px"을, "글꼴 - 가족": "산세 리프" }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">

헤더 이 어떤 단락 텍스트는
10.. 잘못된 코드 : $ ( "#의 myParagraph") CSS ({ "의 backgroundColor": "검은 색", "색상": "흰색");

. 잘못된 코드 : $ ( "#의 myParagraph") CSS ({ "의 backgroundColor": "검은 색", "색상": "흰색");

그 "흰색 후"} "실종

이로 변경
```
 $("#myParagraph").css({"background-color":"black","color":"white"});
```

from https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 자동 증가 플러그인에 대한 텍스트 필드가 있습니까? (0)	2020.10.24
[JQUERY] 어떻게 자바 스크립트 렌더링 된 HTML 페이지의 일부를 인쇄 할 수 있습니까? (0)	2020.10.24
[JQUERY] 어떻게 자바 스크립트를 사용하여 요소의 XPath는 위치를 계산하는? (0)	2020.10.24
[JQUERY] 제출에 방지 폼 리디렉션 또는 새로 고침? (0)	2020.10.24
[JQUERY] JQuery와에 닫 외부 메뉴를 클릭 (0)	2020.10.24

복붙노트

[JQUERY] 어떻게 jQuery를 사용하여 CSS를 변경하려면?

어떻게 jQuery를 사용하여 CSS를 변경하려면?

해결법

1.속성 이름은 문제가 있음을 제안하는 사람들을 무시합니다. JQuery와 API 문서는 명시 적으로 하나 표기법이 허용한다고 : http://api.jquery.com/css/

헤더 이 어떤 단락 텍스트는

2.당신은 하나를 수행 할 수 있습니다 :

3.답변 중 일부는 잘못된 정보를 제공하고 있기 때문에, 약간까지 일을 지우려면 :

4.당신이 jQuery를하여 여러 CSS 속성을 사용하는 경우 당신은 시작과 끝 부분에 중괄호를 사용해야합니다. 당신은 끝 중괄호가 누락되었습니다.

5..CSS () 메소드는 매우 간단 찾아 설정 CSS 속성과 .animate 같은 다른 방법 (함께), 당신은 귀하의 사이트에 멋진 효과를 만들 수 있습니다 할 수 있습니다.

6.그냥 CSS의 방법으로 값을 숫자를 사용할 때 아포스트로피 외부에 추가하고 아포스트로피에 CSS 장치를 추가 할 필요가 있음을 추가하고 싶었다.

7.

8.. $ ( ". radioValue") CSS ({ "배경색" "- 웹킷 선형 구배 (# E9E9E9, RGBA (255, 255, 255, 0.43137254901960786) # E9E9E9)", "컬러": "# 454545 ","패딩 ":"8px "});

헤더 이 어떤 단락 텍스트는

헤더 이 어떤 단락 텍스트는

10.. 잘못된 코드 : $ ( "#의 myParagraph") CSS ({ "의 backgroundColor": "검은 색", "색상": "흰색");

'JQUERY' 카테고리의 다른 글

티스토리툴바