Javascript và CSS, sử dụng dấu gạch ngang

Question

Tôi bắt đầu tìm hiểu một số javascript và hiểu rằng dấu gạch ngang không được phép khi đặt tên mã định danh. Tuy nhiên, trong CSS, việc sử dụng dấu gạch ngang cho ID và lớp là điều phổ biến.

Việc sử dụng dấu gạch ngang trong CSS có cản trở tương tác javascript bằng cách nào đó không? Ví dụ nếu tôi sử dụng getElementByID ("css-dash-name"). Tôi đã thử một vài ví dụ bằng cách sử dụng getElementByID với dấu gạch ngang như một tên cho một ID div và nó đã làm việc, nhưng tôi không chắc chắn nếu đó là trường hợp trong tất cả các bối cảnh khác.

Answer 1

Có dấu gạch ngang và dấu gạch dưới trong ID (hoặc tên lớp nếu bạn chọn theo đó) sẽ không có bất kỳ tác động tiêu cực nào, việc sử dụng chúng sẽ an toàn. Bạn chỉ không có thể làm điều gì đó như:

var some-element = document.getElementByID('css-dash-name'); 

Ví dụ trên sẽ lôi ra vì có một dấu gạch ngang trong biến bạn đang gán các yếu tố để.

Sau đây sẽ là tốt mặc dù vì biến không chứa dấu gạch ngang:

var someElement = document.getElementByID('css-dash-name'); 

Đó đặt tên hạn chế chỉ tồn tại cho các biến javascript mình.

Answer 2

Bất cứ khi nào bạn phải giải quyết thuộc tính CSS dưới dạng tên biến JavaScript, CamelCase là cách chính thức để đi.

element.style.backgroundColor = "#FFFFFF"; 

Bạn sẽ không bao giờ gặp phải vấn đề về ID của phần tử làm tên biến. Mã sẽ luôn nằm trong một chuỗi, vì vậy,

document.getElementById("my-id"); 

sẽ luôn hoạt động.

Answer 3

Không, điều này sẽ không gây ra sự cố. Bạn đang truy cập ID dưới dạng một chuỗi (nó được đặt trong dấu ngoặc kép), vì vậy dấu gạch ngang không có vấn đề gì. Tuy nhiên, tôi sẽ đề nghị không sử dụng document.getElementById ("css-dash-name"), và thay vào đó sử dụng jQuery, vì vậy bạn có thể làm:

$("#css-dash-name"); 

Đó là rõ ràng hơn nhiều. tài liệu jQuery cũng khá tốt. Đó là một người bạn phát triển web tốt nhất.

Answer 4

IDs are allowed to contain hyphens:

• ID và TÊN thẻ phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0 -9]), dấu gạch ngang ("-"), dấu gạch dưới ("_"), dấu hai chấm (":") và dấu chấm (".").

Và không có giới hạn khi sử dụng ID trong JavaScript ngoại trừ nếu bạn muốn tham chiếu đến các phần tử trong phạm vi toàn cầu. Ở đó bạn cần phải sử dụng:

window['css-dash-name'] 

Answer 5

Chỉ trong trường hợp bạn có thể truy cập các yếu tố như thuộc tính tạo sự khác biệt.Ví dụ trường mẫu:

<form> 
    <input type="text" name="go-figure" /> 
    <input type="button" value="Eat me!" onclick="..."> 
</form> 

Trong sự kiện onclick bạn không thể truy cập vào hộp văn bản như một tài sản, như dấu gạch ngang được hiểu như là trừ trong Javascript:

onclick="this.form.go-figure.value='Ouch!';" 

Nhưng bạn vẫn có thể truy cập nó sử dụng một chuỗi:

onclick="this.form['go-figure'].value='Ouch!';" 

Answer 6

câu trả lời khác là chính xác như xa như nơi bạn có thể và không thể sử dụng dấu gạch nối, tuy nhiên tại thư mục gốc của câu hỏi, bạn nên xem xét các ý tưởng về không sử dụng dấu gạch ngang/dấu gạch nối trong của bạn variab tên le/class/ID hoàn toàn. Nó không phải là thực hành tiêu chuẩn, ngay cả khi nó hoạt động và yêu cầu mã hóa cẩn thận để sử dụng nó.

Cân nhắc sử dụng PascalCase (tất cả các từ bắt đầu bằng vốn) hoặc camelCase (từ đầu tiên bắt đầu bằng chữ thường, sau các từ được viết hoa). Đây là hai quy ước đặt tên được chấp nhận phổ biến nhất.

Các tài nguyên khác nhau sẽ đề xuất các lựa chọn khác nhau giữa hai loại này (ngoại trừ JavaScript vốn được đề xuất là camelCase). Cuối cùng miễn là bạn nhất quán trong cách tiếp cận của bạn, đây là phần quan trọng nhất. Sử dụng trường hợp lạc đà hoặc Pascal sẽ đảm bảo bạn không phải lo lắng về các trình truy cập hoặc dấu ngoặc đặc biệt trong mã của bạn.

Đối với công ước JavaScript, hãy thử câu hỏi này/thảo luận:

javascript naming conventions

Đây là một cuộc thảo luận lớn của công ước cho CSS, các yếu tố Html, vv:

What's the best way to name IDs and classes in CSS and HTML?

Answer 7

Sử dụng Hypen (hoặc gạch ngang) là OK

Tôi cũng đang nghiên cứu JavaScript và theo như tôi đã đọc cuốn sách của David Flanagan (JavaScript: Hướng dẫn dứt khoát, Ấn bản lần thứ 5) — Tôi khuyên bạn nên đọc nó. Nó không cảnh báo tôi về việc sử dụng dấu gạch ngang hoặc dấu gạch ngang (-) trong ID và các Lớp (ngay cả thuộc tính Tên) trong tài liệu HTML.

Giống như những gì vẹt đã nói, không được phép sử dụng các biến trong các biến vì trình thông dịch JavaScript sẽ coi nó là dấu trừ và/hoặc dấu âm; nhưng để sử dụng nó trên dây, là khá nhiều ok.

Giống như những gì vẹt và Guffa nói, bạn có thể sử dụng sau đây ...

1. [] (dấu ngoặc vuông)
2. '' (dấu ngoặc đơn ngoặc kép hoặc dấu nháy đơn)

3. "" (dấu ngoặc kép hoặc dấu ngoặc kép)

   để cho biết JavaScript i nterpreter rằng bạn đang khai báo chuỗi (ví dụ: id/class/name của các phần tử của bạn).

Sử dụng Dấu gạch ngang (hoặc dấu gạch ngang) — cho 'nhất quán'

@KP, đó sẽ là ok nếu ông là sử dụng HTML 4.1 hoặc sớm hơn, nhưng nếu ông đang sử dụng bất kỳ phiên bản của XHTML (.eg, XHTML 1.0), thì điều đó không thể thực hiện được, bởi vì cú pháp XHTML cấm chữ hoa (ngoại trừ DOCTYPE, đây là điều duy nhất cần khai báo trong chữ hoa).

@ Xin chào, nếu bạn đang sử dụng HTML 4.1 trở xuống, việc chuyển sang camelCase hoặc PascalCase sẽ không thành vấn đề. Mặc dù, vì lợi ích nhất quán về cách CSS sử dụng dấu phân cách (nó sử dụng dấu gạch ngang hoặc dấu gạch ngang), tôi đề nghị tuân thủ quy tắc của nó. Nó sẽ được nhiều thuận lợi hơn cho bạn để mã HTML và CSS của bạn như nhau. Và hơn thế nữa, bạn thậm chí không phải lo lắng nếu bạn đang sử dụng XHTML hoặc HTML.