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

106

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?

javascript  properties 
— Damon
sumber
Damon, menangani ambiguitas & kebingungan (tercermin juga oleh jawaban yang berbeda dan suara negatif yang ditambahkan / dihapus tergantung pada interpretasi ...): apakah yang Anda maksud secara spesifik adalah properti CSS, seperti yang ditunjukkan oleh contoh Anda & diasumsikan oleh sebagian besar jawaban, atau properti JS apa pun , secara umum, seperti yang ditunjukkan oleh judul dan tidak adanya CSStag? [Ya, saya tahu ini sudah 7 tahun. :)]
— Sz.
@Tokopedia Maksud any js propertysaya karena saya mengalami masalah dengan mereferensikan properti yang memiliki tanda hubung di dalamnya (yang juga merupakan properti css ... saya tidak menyadari bahwa ada masalah lain dengan apa yang saya coba lakukan). Jadi itu aneh yang akhirnya mencakup 2 masalah berbeda. tetapi menurut saya jawaban teratas menjelaskan kedua masalah tersebut.
— Damon

Jawaban:

154

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_$]*
— austinbv.dll
sumber
1
Notasi kunci tidak berlaku di sini - css mendefinisikan gaya menggunakan kotak unta di kunci: jsfiddle.net/49vkD
— Brian
browser apa? Gagal bagi saya di tanda hubung mendapat di IE7, IE8, FFX 3.5. Dan, dengan kegagalan yang saya maksud menampilkan "tidak ditentukan" untuk keduanya ...
— Brian
@brian diuji di safari dan tampilan chrome merah, merah, tengah, tengah. Saya akan mencoba di ff sekarang
— austinbv
@brian menarik, tidak berfungsi di firefox6, saya tidak tahu itu ... belajar sesuatu yang baru setiap hari
— austinbv
1
Menghapus downvote saya karena responden lain menunjukkan bahwa koleksi CSS kebetulan menjadi subjek pertanyaan hte, tetapi pertanyaan sebenarnya adalah bagaimana mendapatkan properti dengan tanda hubung.
— Brian
18

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).

— jAndy
sumber
yang terakhir berfungsi .. salah satu hal sintaks yang baru saja saya lewatkan. skrip yang saya referensikan menggunakan nama gaya css biasa, tetapi masih berguna untuk diketahui!
— Damon
nama properti tidak boleh dimulai dengan angka
— austinbv
Nama properti dapat berisi karakter Unicode yang sangat banyak. Tidak masalah dengan spesifikasi dan tidak masalah dengan browser. Contoh:var ò_ó = 'angry';
— Camilo Martin
Jangan gunakan kode kedua. Properti CSS dilapisi unta. Kode Anda mungkin berfungsi di beberapa browser tetapi tidak standar.
— Oriol
17

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
— Stoney
sumber
2
@ Brian Anda benar untuk properti CSS. Namun, saya menjawab pertanyaan umum asli "Bagaimana cara mereferensikan properti objek javascript dengan tanda hubung di dalamnya?" Ini adalah versi terbaru dari jsfiddle Anda: jsfiddle.net/49vkD/1
— Stoney
1
memang saya mempersempit cakupan jawaban di sini sendiri - saya berasumsi OP berarti objek gaya khusus. Menghapus suara negatif saya karena pertanyaannya sedikit lebih terbuka daripada itu.
— Brian
Aku pikir kamu benar. Mungkin itulah yang diinginkan Damon. Saya membacanya terlalu harfiah.
— Stoney
Anda harus menggunakan nama kandang unta. Tidak bisa .
— Oriol
9

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

— Joe
sumber
1
Anda tidak menuruti saya - Anda memenuhi standar w3c, menurut banyak responden lain untuk pertanyaan ini: w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties , tetapi mendapat suara positif sama. ..
— Brian
Jangan gunakan kode ini. Bukan karena properti CSS dengan casing unta lebih bersifat lintas browser, namun menggunakan tanda hubung, bukan casing unta, bukanlah standar dan seharusnya tidak berfungsi.
— Oriol
4 
alert(style.textAlign)

atau

alert(style["textAlign"]);
— Brian
sumber
4

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.

— Dawson Toth
sumber
Jangan gunakan ini. Properti CSS dilapisi unta. Kode Anda mungkin berfungsi di beberapa browser tetapi tidak standar.
— Oriol
Disesuaikan untuk menggunakan casing unta.
— Dawson Toth
3

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.

— Quentin
sumber
2

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']

— GordonM
sumber
0

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!

— Woppi
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.