Làm cách nào để tham chiếu thuộc tính đối tượng javascript có dấu gạch ngang trong đó?

Sử dụng tập lệnh này để tạo một đối tượng kiểu của tất cả các kiểu vv được kế thừa.

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

với điều sau đây, cảnh báo đầu tiên sẽ hoạt động tốt, nhưng cảnh báo thứ hai thì không .. nó diễn giải -như một dấu trừ mà tôi cho là .. trình gỡ lỗi cho biết 'lỗi tham chiếu chưa được suy nghĩ'. Tôi không thể đặt dấu ngoặc kép xung quanh nó, vì nó không phải là một chuỗi. Vậy làm cách nào để sử dụng thuộc tính đối tượng này?

BIÊN TẬP

Nhìn vào các nhận xét, bạn sẽ thấy rằng đối với các thuộc tính css, ký hiệu khóa không tương thích với một số thuộc tính. Do đó, sử dụng ký hiệu khóa vỏ lạc đà là cách hiện tại

obj.style-attr // would become 

obj["styleAttr"]

Sử dụng ký hiệu phím thay vì dấu chấm

style["text-align"]

Tất cả các mảng trong js là các đối tượng và tất cả các đối tượng chỉ là các mảng kết hợp, điều này có nghĩa là bạn có thể tham chiếu đến một vị trí trong một đối tượng giống như bạn sẽ tham chiếu đến một khóa trong một mảng.

arr[0]

hoặc đối tượng

obj["method"] == obj.method

một số điều cần nhớ khi truy cập các thuộc tính theo cách này

1. chúng được đánh giá vì vậy hãy sử dụng chuỗi trừ khi bạn đang làm gì đó với bộ đếm hoặc sử dụng tên phương thức động.

   điều này có nghĩa là obj [method] sẽ cung cấp cho bạn một lỗi không xác định trong khi obj ["method"] thì không

2. Bạn phải sử dụng ký hiệu này nếu bạn đang sử dụng các ký tự không được phép trong biến js.

Regex này tổng hợp khá nhiều

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

Thuộc tính CSS với a -được biểu diễn trong camelCase trong các đối tượng Javascript. Đó sẽ là:

alert( style.textAlign );

Bạn cũng có thể sử dụng ký hiệu ngoặc để sử dụng chuỗi:

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

Tên thuộc tính chỉ được chứa các ký tự, số, $dấu hiệu nổi tiếng và dấu _(nhờ pimvdb).

Câu trả lời cho câu hỏi ban đầu là: đặt tên thuộc tính trong dấu ngoặc kép và sử dụng lập chỉ mục kiểu mảng:

obj['property-with-hyphens'];

Một số đã chỉ ra rằng thuộc tính mà bạn quan tâm là thuộc tính CSS. Các thuộc tính CSS có dấu gạch nối sẽ tự động được chuyển đổi thành cách viết hoa camel. Trong trường hợp đó, bạn có thể sử dụng tên có vỏ lạc đà như:

style.textAlign;

Tuy nhiên giải pháp này chỉ hoạt động cho các thuộc tính CSS. Ví dụ,

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

Sử dụng dấu ngoặc:

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

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

Thông tin thêm về các đối tượng: MDN

LƯU Ý: Nếu bạn đang truy cập đối tượng kiểu , CSSStyleDec Tuyên bố , sử dụng must camelCase để truy cập nó từ javascript. Thông tin thêm tại đây

alert(style.textAlign)

hoặc là

alert(style["textAlign"]);

Để trả lời trực tiếp câu hỏi: style['text-align']là cách bạn tham chiếu một thuộc tính có dấu gạch ngang trong đó. Nhưng style.textAlign(hoặc style['textAlign']) là những gì nên được sử dụng trong trường hợp này.

Thuộc tính kiểu gạch nối được tham chiếu qua camelCase trong JavaScript , vì vậy hãy sử dụng style.textAlign.

Để giải quyết vấn đề của bạn : Các thuộc tính CSS có dấu gạch nối trong đó được đại diện bởi các thuộc tính JavaScript trong camelCase để tránh vấn đề này. Bạn muốn: style.textAlign.

Để trả lời câu hỏi : Sử dụng ký hiệu dấu ngoặc vuông : obj.propgiống như cách obj["prop"]bạn có thể truy cập vào tên thuộc tính bằng cách sử dụng chuỗi và sử dụng các ký tự bị cấm trong số nhận dạng.

Tên thuộc tính đối tượng không phải là một đối một cho các tên css.

Tôi nghĩ rằng trong trường hợp của phong cách CSS họ nhận được thay đổi để camelCase trong Javascript để test-aligntrở thành textAlign. Trong trường hợp chung khi bạn muốn truy cập thuộc tính có chứa các ký tự không chuẩn, bạn sử dụng kiểu mảng. ['text-align']

Lúc đầu, tôi tự hỏi tại sao giải pháp không hoạt động với tôi

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

... sau đó tìm ra rằng việc truy cập các thuộc tính dữ liệu là khác nhau: Nó sẽ như thế này:

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

Hi vọng điêu nay co ich!