jQuery를 사용하여 CSS를 변경하는 방법?

133

jQuery를 사용하여 CSS를 변경하려고합니다.

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

스 니펫 확장

내가 여기서 무엇을 놓치고 있습니까?

javascript jquery css

— 사용자
소스

2

수정되었습니다. 아래에 답변 된 것처럼 두 가지 해결책이 있습니다. 공장. 모두 감사합니다!

— user449914

1

자바 스크립트에서 CSS를 조작하는 것은 나쁜 습관으로 간주 될 수 있습니다. 클래스 추가 / 제거 / 토글을 고려하십시오.

— Austin

210

속성 이름이 문제라고 제안하는 사람들은 무시하십시오. jQuery API 문서에는 명시 적으로 다음 중 하나의 표기법이 허용된다고 명시되어 있습니다. http://api.jquery.com/css/

실제 문제는이 줄에 닫는 중괄호가 없다는 것입니다.

$("#myParagraph").css({"backgroundColor":"black","color":"white");

이것을 다음과 같이 변경하십시오.

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

실제 데모는 다음과 같습니다. http://jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

스 니펫 확장

— 엔더
소스

값을 변수 (예 paddingTop: x number of px)로 어떻게 추가합니까? 내가 시도한 모든 종류의 구문으로 인해 오류가 발생했습니다.

— Mentalist

신경 쓰지 마. 알았어요 :$("#main").css({paddingTop: (var_name+20) + "px"});

— 멘탈

52

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

$("h1").css("background-color", "yellow");

또는:

$("h1").css({backgroundColor: "yellow"});

— 사프 라즈
소스

3

{"backgroundColor": "yellow"}불필요하지만 유효합니다.

— Tgr

@ user449914 : 당신이 객체 리터럴에 속성 이름 주위에 따옴표를 넣을 필요가 없습니다 - {foo: "bar"}동일하다 {"foo": "bar"}.

— Tgr

24

답변 중 일부가 잘못된 정보를 제공하고 있기 때문에 내용을 약간 정리하려면 다음을 수행하십시오.

jQuery .css () 메소드를 사용하면 많은 경우 DOM 또는 CSS 표기법을 사용할 수 있습니다. 그래서, 모두 backgroundColor와 background-color작업이 완료 얻을 것이다.

또한 .css()인수 를 호출 하면 인수가 무엇인지에 대한 두 가지 선택이 있습니다. CSS 속성 및 해당 값을 나타내는 쉼표로 구분 된 2 개의 문자열이거나 CSS 속성 및 값의 하나 이상의 키 값 쌍을 포함하는 Javascript 객체 일 수 있습니다.

결론적으로 코드에서 잘못된 것은 유실 }입니다. 줄은 다음과 같아야합니다.

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

당신은 중괄호를 생략 할 수는 없지만 각국에서 따옴표를 떠날 수 backgroundColor와 color. 사용하는 경우 background-color하이픈으로 인해 따옴표를 묶어야합니다.

일반적으로 기존 키워드를 인용하지 않으면 문제가 발생할 수 있으므로 Javascript 객체를 인용하는 것이 좋습니다 .

마지막으로 jQuery .ready () 메소드에 대해

$(handler);

이다 동의어 로 :

$(document).ready(handler);

권장하지 않는 세 번째 양식과 함께.

이는 해당 인스턴스의 핸들러 $(init)이기 때문에 완전히 정확함을 의미 init합니다. 따라서 initDOM이 생성되면 시작됩니다.

— 피터 아지 타이
소스

10

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 특성을 설정할 수 있습니다. 속성과 값을 문자열로 전달하면 요소의 CSS 속성이 변경됩니다.

$('.example').css('background-color', 'red');

'example'클래스를 가진 모든 요소에 대해 'background-color'속성을 'red'로 설정합니다.

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

대신 .css()속성과 값을 키 / 값 쌍으로 포함하는 Javascript 객체를 메서드에 전달할 수 있습니다 . 이렇게하면 각 속성이 jQuery 객체에서 한 번에 설정됩니다.

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

이렇게하면 '.example'요소에서 이러한 모든 CSS 속성이 변경됩니다.

— 남자
소스

3

CSS 방법으로 값에 숫자를 사용할 때 아포스트로피 외부에 값을 추가 한 다음 아포스트로피에 CSS 단위 를 추가해야한다고 덧붙였습니다.

$('.block').css('width',50 + '%');

또는

var $block = $('.block')    

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

— 로우 테크 선
소스

1

<!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>

— 니킷 바로 키야
소스

1

$ ( ". radioValue"). css ({ "background-color": "-webkit-linear-gradient (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)" ","color ":"# 454545 ","padding ":"8px "});

— 다우 지 카타 라
소스

2

약간의 설명도 도움이 될 것입니다.

— timiTao

1

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
<h1>Header</h1>
<p id="myParagraph">This is some paragraph text</p>
</div>

스 니펫 확장

이 코드는 질문에 대답 할 수 있지만 문제를 해결하는 방법과 이유에 대한 정보를 제공하면 장기적인 가치가 향상됩니다.

— L_J

0

잘못된 코드:$("#myParagraph").css({"backgroundColor":"black","color":"white");

그 "}"후 누락 white"

이것을 이것을 바꾸십시오

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

— 갈 렉스
소스

8

3 년 반만에 가장 인기있는 답변을 반복했습니다.

— 커티스 패트릭