ฉันจะอ้างอิงคุณสมบัติของวัตถุจาวาสคริปต์ด้วยยัติภังค์ได้อย่างไร

การใช้สคริปต์นี้เพื่อสร้างสไตล์อ็อบเจ็กต์ของสไตล์ ฯลฯ ที่สืบทอดมาทั้งหมด

var style = css($(this));
alert (style.width);
alert (style.text-align);

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

แก้ไข

ดูความคิดเห็นคุณจะเห็นว่าสำหรับสัญกรณ์คีย์คุณสมบัติ css เข้ากันไม่ได้กับคุณสมบัติหลายอย่าง การใช้สัญกรณ์แป้นกรณีอูฐจึงเป็นวิธีปัจจุบัน

obj.style-attr // would become 

obj["styleAttr"]

ใช้สัญลักษณ์แทนจุด

style["text-align"]

อาร์เรย์ทั้งหมดใน js เป็นวัตถุและวัตถุทั้งหมดเป็นเพียงอาร์เรย์ที่เชื่อมโยงกันซึ่งหมายความว่าคุณสามารถอ้างถึงสถานที่ในวัตถุได้เช่นเดียวกับที่คุณอ้างถึงคีย์ในอาร์เรย์

arr[0]

หรือวัตถุ

obj["method"] == obj.method

สองสิ่งที่ต้องจำเมื่อเข้าถึงคุณสมบัติด้วยวิธีนี้

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

   ซึ่งหมายความว่า obj [วิธีการ] จะทำให้คุณมีข้อผิดพลาดที่ไม่ได้กำหนดในขณะที่ obj ["method"] จะไม่

2. คุณต้องใช้สัญกรณ์นี้หากคุณใช้อักขระที่ไม่ได้รับอนุญาตในตัวแปร js

regex นี้สรุปได้ค่อนข้างมาก

[a-zA-Z_$][0-9a-zA-Z_$]*

คุณสมบัติ CSS ที่มี a -แสดงอยู่ใน camelCase ในวัตถุ Javascript นั่นจะเป็น:

alert( style.textAlign );

คุณยังสามารถใช้เครื่องหมายวงเล็บเพื่อใช้สตริง:

alert( style['text-align'] );

ชื่อคุณสมบัติต้องประกอบด้วยอักขระตัวเลข$เครื่องหมายที่รู้จักกันดีและ_(ขอบคุณ pimvdb)

คำตอบสำหรับคำถามเดิมคือ: วางชื่อคุณสมบัติในเครื่องหมายคำพูดและใช้การสร้างดัชนีสไตล์อาร์เรย์:

obj['property-with-hyphens'];

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

style.textAlign;

อย่างไรก็ตามโซลูชันนี้ใช้ได้กับคุณสมบัติ CSS เท่านั้น ตัวอย่างเช่น,

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2

ใช้วงเล็บ:

var notTheFlippingStyleObject = {
    'a-b': 1
};

console.log(notTheFlippingStyleObject["a-b"] === 1); // true

ข้อมูลเพิ่มเติมเกี่ยวกับวัตถุ: MDN

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

alert(style.textAlign)

หรือ

alert(style["textAlign"]);

เพื่อตอบคำถามโดยตรง: style['text-align']คุณจะอ้างอิงคุณสมบัติที่มียัติภังค์อยู่ในนั้นอย่างไร แต่style.textAlign(หรือstyle['textAlign']) คือสิ่งที่ควรใช้ในกรณีนี้

คุณสมบัติของสไตล์ยัติภังค์จะอ้างอิงทาง CamelCase ใน JavaScriptstyle.textAlignเพื่อให้การใช้งาน

เพื่อแก้ปัญหาของคุณคุณสมบัติ CSS ที่มีขีดกลางแสดงโดยคุณสมบัติ JavaScript ใน camelCaseเพื่อหลีกเลี่ยงปัญหานี้ คุณต้องการ: style.textAlign.

เพื่อตอบคำถาม : ใช้เครื่องหมายวงเล็บเหลี่ยม : obj.propเหมือนกับobj["prop"]เพื่อให้คุณสามารถเข้าถึงชื่อคุณสมบัติโดยใช้สตริงและใช้อักขระที่ห้ามใช้ในตัวระบุ

ชื่อคุณสมบัติของอ็อบเจ็กต์ไม่ใช่การจับคู่แบบหนึ่งต่อหนึ่งสำหรับชื่อ css

ผมคิดว่าในกรณีของรูปแบบ CSS ที่พวกเขาได้รับการเปลี่ยนแปลงที่จะ CamelCase ใน Javascript เพื่อให้กลายเป็นtest-align textAlignในกรณีทั่วไปที่คุณต้องการเข้าถึงคุณสมบัติที่มีอักขระที่ไม่ใช่มาตรฐานที่คุณใช้สไตล์อาร์เรย์ ['text-align']

ตอนแรกฉันสงสัยว่าทำไมการแก้ปัญหาถึงไม่ได้ผลในตอนท้ายของฉัน

api['data-sitekey'] //returns undefined

... ในภายหลังพบว่าการเข้าถึงแอตทริบิวต์ข้อมูลแตกต่างกันควรเป็นดังนี้:

var api = document.getElementById("some-api");
api.dataset.sitekey

หวังว่านี่จะช่วยได้!