jQuery CSS Operation - css() Method

jQuery CSS ปฏิบัติการคู่มือเรียกเรียน

ตัวอย่าง

ตั้งค่าสีขององค์ประกอบ <p>:

$(".btn1").click(function(){
  $("p").css("color","red");
});

ทดลองด้วยตัวเอง

คำนิยามและวิธีใช้

วิธี css() กลับค่าหรือตั้งค่าค่าสไตล์หนึ่งหรือหลายขององค์ประกอบที่ตรงกับเงื่อนไข

กลับค่าค่า CSS

กลับค่าค่า CSS ขององค์ประกอบที่ตรงกับเงื่อนไข

หมายเหตุ:เมื่อใช้เพื่อกลับค่า ไม่สนับสนุนค่า CSS ที่เรียกเรียงสั้น (เช่น "background" และ "border")

$(selector).css(name)
ตัวแปร รายละเอียด
name จำเป็น กำหนดชื่อของค่า CSS พารามิเตอร์นี้สามารถรวมถึงค่า CSS ทุกชนิด ตัวอย่างเช่น "color"

ตัวอย่าง

ได้ค่าตัวแปร color ของสไตล์ของย่อหน้าแรก:

$("p").css("color");

ทดลองด้วยตัวเอง

ตั้งค่าค่า CSS

ตั้งค่า CSS คุณต้องการสำหรับองค์ประกอบที่ตรงกันทั้งหมด

$(selector).css(name,value)
ตัวแปร รายละเอียด
name สำคัญ。กำหนดชื่อ CSS คุณต้องการ ตัวแปรนี้สามารถมีชื่อคุณสมบัติ CSS ทุกชิ้น ตัวอย่าง "color"
value

ที่เลือกตั้งได้。กำหนดค่าของ CSS คุณต้องการ ตัวแปรนี้สามารถมีค่าคุณสมบัติ CSS ทุกชิ้น ตัวอย่าง "red"

ถ้ากำหนดค่าว่าง จะลบองค์ประกอบที่กำหนดออกจากองค์ประกอบ

ตัวอย่าง

ตั้งค่าสีของย่อหน้าทั้งหมดเป็นแดง:

$("p").css("color","red");

ทดลองด้วยตัวเอง

ใช้ฟังก์ชันเพื่อตั้งค่า CSS

ตั้งค่าค่ารูปแบบของคุณต่อองค์ประกอบที่ตรงกันทั้งหมด

ฟังก์ชันนี้กลับค่าค่าที่ต้องการตั้งค่า รับสองตัวแปร index คือตำแหน่งขององค์ประกอบในตัวเลขที่เรียก และ value คือค่าปัจจุบันขององค์ประกอบ

$(selector).css(name,function(index,value))
ตัวแปร รายละเอียด
name สำคัญ。กำหนดชื่อ CSS คุณต้องการ ตัวแปรนี้สามารถมีชื่อคุณสมบัติ CSS ทุกชิ้น ตัวอย่าง "color"
function(index,value)

กำหนดฟังก์ชันที่จะกลับค่าค่าใหม่ของ CSS คุณต้องการ

  • index - ที่เลือกตั้งได้。ยอดรับตำแหน่ง index ของ selector
  • oldvalue - ที่เลือกตั้งได้。ยอดรับค่าปัจจุบันของ CSS คุณต้องการ

ตัวอย่าง 1

ตั้งค่าสีของย่อหน้าทั้งหมดเป็นแดง:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เพิ่มความกว้างของ div ขึ้นเรื่อยๆ:

$("div").click(function() {
  $(this).css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

ทดลองด้วยตัวเอง

ตั้งค่า CSS หลายคุณสมบัติ/ค่า

$(selector).css({property:value, property:value, ...})

ตั้งค่าชื่อค่า "name/value pair" ขององค์ประกอบที่ตรงกันทั้งหมดเป็นรูปแบบ

นี่คือวิธีที่ดีที่สุดในการตั้งรูปแบบหลายคุณสมบัติให้กับองค์ประกอบที่ตรงกัน

ตัวแปร รายละเอียด
{property:value}

สำคัญ。กำหนดชื่อค่า "name/value pair" ของคุณต่อคุณต้องการจะตั้งรูปแบบ

ตัวแปรนี้สามารถมีหลายๆคู่ชื่อค่า CSS อยู่ ตัวอย่าง {"color":"red","font-weight":"bold"}

ตัวอย่าง

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

ทดลองด้วยตัวเอง

jQuery CSS ปฏิบัติการคู่มือเรียกเรียน