จะเปลี่ยน CSS โดยใช้ jQuery ได้อย่างไร?

ฉันกำลังพยายามเปลี่ยน CSS โดยใช้ jQuery:

$(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()ด้วยอาร์กิวเมนต์คุณมีสองทางเลือกว่าอาร์กิวเมนต์เป็นอย่างไร อาจเป็นสตริงที่คั่นด้วยจุลภาค 2 สตริงที่แสดงถึงคุณสมบัติ css และค่าของมันหรืออาจเป็นอ็อบเจ็กต์ Javascript ที่มีคู่ค่าคีย์ของคุณสมบัติและค่า CSS อย่างน้อยหนึ่งคู่

}ในการสรุปสิ่งเดียวที่ไม่ถูกต้องกับรหัสของคุณเป็นที่ขาดหายไป บรรทัดควรอ่าน:

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

คุณไม่สามารถปล่อยให้วงเล็บปีกกาออก แต่คุณอาจปล่อยให้คำพูดที่ออกมาจากทั่วและbackgroundColor colorหากคุณใช้background-colorคุณต้องใส่เครื่องหมายคำพูดไว้รอบตัวเนื่องจากมียัติภังค์

โดยทั่วไปแล้วมันเป็นนิสัยที่ดีที่จะพูดวัตถุ Javascript ของคุณตั้งแต่ปัญหาสามารถเกิดขึ้นได้ถ้าคุณไม่ได้พูดคำหลักที่มีอยู่

หมายเหตุสุดท้ายคือเกี่ยวกับเมธอดjQuery .ready ()

$(handler);

เป็นความหมายเหมือนกันด้วย:

$(document).ready(handler);

เช่นเดียวกับแบบฟอร์มที่สามที่ไม่แนะนำ

ซึ่งหมายความว่า$(init)ถูกต้องอย่างสมบูรณ์เนื่องจากinitเป็นตัวจัดการในอินสแตนซ์นั้น ดังนั้นinitจะเริ่มทำงานเมื่อสร้าง DOM

เมื่อคุณใช้คุณสมบัติ Multiple css กับ jQuery คุณต้องใช้ Curly Brace ในการเริ่มต้นและในตอนท้าย คุณไม่มีวงเล็บปีกกาตอนจบ

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

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

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

คุณสามารถดูได้ที่นี้jQuery CSS Selector กวดวิชา

.css()วิธีการทำให้มันง่ายสุดในการค้นหาและคุณสมบัติชุด CSS และรวมกับวิธีการอื่น ๆ เช่น .animate () คุณสามารถทำให้ผลเย็นบางอย่างเกี่ยวกับเว็บไซต์ของคุณ

ในรูปแบบที่ง่ายที่สุด.css()วิธีนี้สามารถตั้งค่าคุณสมบัติ CSS เดียวสำหรับชุดองค์ประกอบที่ตรงกันโดยเฉพาะ คุณเพียงแค่ส่งคุณสมบัติและค่าเป็นสตริงและคุณสมบัติ CSS ขององค์ประกอบก็เปลี่ยนไป

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

สิ่งนี้จะตั้งค่าคุณสมบัติ "background-color" เป็น "red" สำหรับองค์ประกอบใด ๆ ที่มีคลาสเป็น "example"

แต่คุณไม่ได้ จำกัด เพียงแค่เปลี่ยนคุณสมบัติทีละรายการ แน่นอนว่าคุณสามารถเพิ่มวัตถุ 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'
});

สิ่งนี้จะเปลี่ยนคุณสมบัติ CSS เหล่านี้ทั้งหมดในองค์ประกอบ ".example"

แค่อยากจะเพิ่มว่าเมื่อใช้ตัวเลขสำหรับค่าด้วยวิธี css คุณต้องเพิ่มพวกเขานอกเครื่องหมายวรรคตอนแล้วเพิ่มหน่วย CSS ในเครื่องหมายอะพอสทรอฟี

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

หรือ

var $block = $('.block')    

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

<!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 "});

รหัสผิด:$("#myParagraph").css({"backgroundColor":"black","color":"white");

มันหายไป "}"หลังจากwhite"

เปลี่ยนเป็นสิ่งนี้

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