Bagaimana cara mereferensikan properti objek javascript dengan tanda hubung di dalamnya?

Menggunakan skrip ini untuk membuat objek gaya dari semua gaya dll yang diwariskan.

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

dengan yang berikut, peringatan pertama akan bekerja dengan baik, tetapi yang kedua tidak .. itu menafsirkan -sebagai minus Saya asumsikan .. debugger mengatakan 'kesalahan referensi tidak tertangkap'. Saya tidak bisa memberi tanda kutip, karena itu bukan string. Jadi bagaimana cara menggunakan properti objek ini?

EDIT

Perhatikan komentar Anda akan melihat bahwa untuk properti css, notasi kunci tidak kompatibel dengan sejumlah properti. Oleh karena itu, menggunakan notasi kunci kasus unta adalah cara saat ini

obj.style-attr // would become 

obj["styleAttr"]

Gunakan notasi kunci daripada titik

style["text-align"]

Semua array di js adalah objek dan semua objek hanyalah array asosiatif, ini berarti Anda bisa merujuk ke suatu tempat di objek seperti Anda merujuk ke kunci dalam array.

arr[0]

atau objeknya

obj["method"] == obj.method

beberapa hal yang perlu diingat saat mengakses properti dengan cara ini

1. mereka dievaluasi jadi gunakan string kecuali Anda melakukan sesuatu dengan counter atau menggunakan nama metode dinamis.

   ini berarti obj [metode] akan memberi Anda kesalahan yang tidak terdefinisi sementara obj ["metode"] tidak

2. Anda harus menggunakan notasi ini jika Anda menggunakan karakter yang tidak diperbolehkan dalam variabel js.

Regex ini merangkumnya

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

Properti CSS dengan a -direpresentasikan dalam camelCase dalam objek Javascript. Itu akan menjadi:

alert( style.textAlign );

Anda juga bisa menggunakan notasi braket untuk menggunakan string:

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

Nama properti hanya boleh berisi karakter, angka, $tanda terkenal dan _(terima kasih kepada pimvdb).

Jawaban untuk pertanyaan awal adalah: tempatkan nama properti dalam tanda kutip dan gunakan pengindeksan gaya array:

obj['property-with-hyphens'];

Beberapa orang telah menunjukkan bahwa properti yang Anda minati adalah properti CSS. Properti CSS yang memiliki tanda hubung secara otomatis diubah menjadi casing unta. Dalam hal ini Anda dapat menggunakan nama kandang unta seperti:

style.textAlign;

Namun solusi ini hanya berfungsi untuk properti CSS. Sebagai contoh,

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

Gunakan tanda kurung:

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

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

Info lebih lanjut tentang objek: MDN

CATATAN: Jika Anda mengakses objek gaya , CSSStyleDeclaration , gunakan must camelCase untuk mengaksesnya dari javascript. Info selengkapnya di sini

alert(style.textAlign)

atau

alert(style["textAlign"]);

Untuk langsung menjawab pertanyaan: style['text-align']adalah bagaimana Anda mereferensikan properti dengan tanda hubung di dalamnya. Tapi style.textAlign(atau style['textAlign']) apa yang harus digunakan dalam kasus ini.

Properti gaya tanda hubung direferensikan melalui camelCase di JavaScript , jadi gunakan style.textAlign.

Untuk mengatasi masalah Anda : Properti CSS dengan tanda hubung di dalamnya diwakili oleh properti JavaScript di camelCase untuk menghindari masalah ini. Anda ingin: style.textAlign.

Untuk menjawab pertanyaan : Gunakan notasi kurung siku : obj.propsama obj["prop"]sehingga Anda dapat mengakses nama properti menggunakan string dan menggunakan karakter yang dilarang dalam pengidentifikasi.

Nama properti objek tidak cocok satu-ke-satu untuk nama css.

Saya pikir dalam kasus gaya CSS mereka berubah menjadi camelCase di Javascript test-alignmenjadi textAlign. Dalam kasus umum di mana Anda ingin mengakses properti yang berisi karakter non-standar, Anda menggunakan gaya array. ['text-align']

Pada awalnya, saya bertanya-tanya mengapa solusi tersebut tidak berhasil di pihak saya

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

... nanti mengetahui bahwa mengakses atribut data berbeda: Seharusnya seperti ini:

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

Semoga ini membantu!