วิธีการกำหนดหลายคุณสมบัติ CSS ใน jQuery?

มีวิธีการสร้างประโยคใด ๆ ใน jQuery เพื่อกำหนดแอตทริบิวต์ CSS หลายรายการโดยไม่ต้องใส่สตริงทุกอย่างออกทางด้านขวาดังนี้:

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

ถ้าคุณบอกว่า 20 รหัสของคุณจะอ่านยากการแก้ปัญหาใด ๆ

จาก jQuery API ตัวอย่างเช่น jQuery เข้าใจและส่งคืนค่าที่ถูกต้องสำหรับทั้งคู่

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

และ

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

โปรดสังเกตว่าด้วยสัญกรณ์ DOM เครื่องหมายอัญประกาศรอบชื่อคุณสมบัตินั้นเป็นทางเลือกแต่ด้วยสัญกรณ์ CSS ที่ต้องการเนื่องจากเครื่องหมายขีดคั่นในชื่อ

ดีกว่าที่จะเพียงแค่ใช้.addClass()แม้ว่าคุณจะมี 1 หรือมากกว่า บำรุงรักษาได้มากกว่าและอ่านได้

หากคุณมีความต้องการที่จะทำหลาย ๆ คุณสมบัติของ CSS ให้ทำดังนี้:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

NB! ต้องอ้าง
คุณสมบัติ CSS ใด ๆ ที่มีขีดกลาง
ฉันได้ใส่เครื่องหมายคำพูดไว้ดังนั้นจึงไม่มีใครจำเป็นต้องชี้แจงว่าและรหัสจะทำงานได้ 100%

ผ่านมันเป็นวัตถุ:

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

การใช้ออบเจ็กต์ธรรมดาคุณสามารถจับคู่สตริงที่แสดงชื่อคุณสมบัติด้วยค่าที่เกี่ยวข้อง ตัวอย่างเช่นการเปลี่ยนสีพื้นหลังและการทำให้ข้อความโดดเด่นยิ่งขึ้นจะมีลักษณะเช่นนี้:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

หรือคุณสามารถใช้ชื่อคุณสมบัติ JavaScript ได้เช่นกัน:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

ข้อมูลเพิ่มเติมสามารถพบได้ในเอกสารของ jQuery

โปรดลองสิ่งนี้

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

คุณยังสามารถใช้attrพร้อมกับstyle:

$('#message').attr("style", "width:550; height:300; font-size:8px" );

เห็นด้วยกับ redsquare แต่มันก็คุ้มค่าที่จะพูดถึงว่าถ้าคุณมีคุณสมบัติสองคำเหมือนtext-alignคุณจะทำสิ่งนี้:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

นอกจากนี้อาจเป็นการดีกว่าที่จะใช้ jQuery ในตัวaddClassเพื่อให้โครงการของคุณขยายขนาดได้

ที่มา: วิธีการ: jQuery เพิ่ม CSS และลบ CSS

ลองสิ่งนี้

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

ต้นฉบับ

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

html

<div id="hello"></div>

คุณสามารถลองสิ่งนี้

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

วิธีที่ดีที่สุดในการใช้ตัวแปร

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

ถ้าคุณต้องการเปลี่ยนหลายแอตทริบิวต์ css คุณต้องใช้โครงสร้างวัตถุดังนี้

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

แต่มันแย่ลงเมื่อเราต้องการเปลี่ยนสไตล์มากมายดังนั้นสิ่งที่ฉันแนะนำให้คุณคือการเพิ่มคลาสแทนการเปลี่ยน CSS โดยใช้ jQuery และการเพิ่มคลาสก็สามารถอ่านได้มากขึ้นเช่นกัน

ดูตัวอย่างด้านล่าง:

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

ข้อดีอย่างหนึ่งของตัวอย่างหลังในอดีตคือถ้าคุณต้องการเพิ่ม css onclickบางอย่างและต้องการลบ css นั้นในการคลิกครั้งที่สองจากนั้นในตัวอย่างหลังคุณสามารถใช้.toggleClass('custom-class')

ในตัวอย่างก่อนหน้านี้คุณต้องตั้งค่า css ทั้งหมดด้วยค่าต่าง ๆ ที่คุณตั้งไว้ก่อนหน้าและมันจะซับซ้อนดังนั้นการใช้คลาสตัวเลือกจะเป็นทางออกที่ดีกว่า

คุณสามารถใช้ได้

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

วิธีที่ดีที่สุดคือใช้ $ ('selector'). addClass ('custom-class') และ

.custom-class{
width:16px,
color: green;
margin: 0;
}