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

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

---

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>

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

---

속성 이름이 문제라고 제안하는 사람들은 무시하십시오. 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>

---

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

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

또는:

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

---

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

---

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

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

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

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

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

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

---

A final note is that about the jQuery .ready() method

$(handler);

is synonymous with:

$(document).ready(handler);

as well as with a third not recommended form.

This means that $(init) is completely correct, since init is the handler in that instance. So, init will be fired when the DOM is constructed.

---

When you are using Multiple css property with jQuery then you must use the curly Brace in starting and in the end. You are missing the ending curly brace.

function init() {
 $("h1").css("backgroundColor", "yellow");

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

 $(".bordered").css("border", "1px solid black");
}

You can have a look at this jQuery CSS Selector tutorial.

---

Just wanted to add that when using numbers for values with the css method you have to add them outside the apostrophe and then add the CSS unit in apostrophes.

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

or

var $block = $('.block')    

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

---

The .css() method makes it super simple to find and set CSS properties and combined with other methods like .animate(), you can make some cool effects on your site.

In its simplest form, the .css() method can set a single CSS property for a particular set of matched elements. You just pass the property and value as strings and the element’s CSS properties are changed.

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

This would set the ‘background-color’ property to ‘red’ for any element that had the class of ‘example’.

But you aren’t limited to just changing one property at a time. Sure, you could add a bunch of identical jQuery objects, each changing just one property at a time, but this is making several, unnecessary calls to the DOM and is a lot of repeated code.

Instead, you can pass the .css() method a Javascript object that contains the properties and values as key/value pairs. This way, each property will then be set on the jQuery object all at once.

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

This will change all of these CSS properties on the ‘.example’ elements.

---

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

---

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

---

$(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>

---

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

its missing "}" after white"

change it to this

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

참고URL : https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery