không thể thay đổi màu sắc <label> văn bản

Question

Nghiên cứu của tôi vào cơ sở phần tử HTML DOM nói này về bất kỳ yếu tố của DOM "phong cách" tài sản (từ http://www.w3schools.com/jsref/dom_obj_all.asp):

"style -- Sets or returns the style attribute of an element" 

Thẻ 'nhãn' là một yếu tố dom. Và do đó nó có một thuộc tính 'phong cách'. Vì nó chỉ ra liên kết w3schools ở trên, tất cả các phần tử dom đều có thuộc tính 'kiểu'.

Và trên thực tế, ở đây tôi đang thiết (inline) các 'phong cách' tài sản cho một nhãn thẻ - và điều này hoạt động tốt:

<label for="itemImageId" style="color: gray" id="labelForImageUploadID">Item image</label> 

Nhãn màu chữ là màu xám ở tải trang thời gian.

Trong một điều kiện nhất định (người dùng đã cho biết họ sẵn sàng chọn hình ảnh để tải lên) - Tôi cần hiển thị tải lên dưới dạng 'đã bật' bằng cách thay đổi màu văn bản xám ban đầu ở trên thành đen.

Tôi có biết tôi có thể sử dụng lớp css cho màu văn bản của nhãn này và sử dụng thuộc tính 'className' để tự động thay đổi lớp css ở trên? Bạn đặt cược tôi làm. Tối nay mặc dù tôi đang nắm giữ chân yếu tố DOM này vào lửa. Tôi chỉ có một thuộc tính 'phong cách' để thay đổi (màu văn bản) và không muốn thêm một lớp học chỉ cho nó - những gì tôi đang cố gắng ở đây sẽ hoạt động theo các tài liệu.

Tôi muốn biết lý do tại sao tôi không thể sử dụng thuộc tính 'kiểu' như DOM cho biết tôi có thể - "nhận" và "đặt" thuộc tính DOM của của phần tử DOM.

Ở đây tôi là "thiết lập" -ing các 'phong cách' tài sản của tôi - điều này làm NOTHING - văn bản nhãn vẫn còn màu xám:

document.getElementById('labelForImageUploadID').style = "color: rgb(0,0,0)"; 

Cũng không phải điều này không thay đổi màu sắc từ màu xám sang màu đen :

document.getElementById('labelForImageUploadID').style = "color: black"; 

Đoạn mã trên thực hiện (trong javascript) sau nhãn là đã xuất hiện trên trang, và để đáp ứng với một sự kiện onclick của một nút trên hình thức mà nhãn cũng là một phần của.

Có lỗi trong khả năng "đặt" thuộc tính 'kiểu' của phần tử DOM không? Theo http://www.w3schools.com/jsref/dom_obj_all.asp,

"HTMLElement Object 

    The following properties, and methods can be used on all HTML elements." 

     (other properties here.....) 
    "style -- Sets or returns the style attribute of an element" 
     (still other properties here......) 

Vậy tại sao tôi không thể thay đổi 'phong cách' tài sản của phần tử sau đó trong mã của tôi ở trên?

Answer 1

^{Khi xem xét câu trả lời này vào năm 2017, ví dụ ban đầu về việc đặt toàn bộ chuỗi kiểu hoạt động chính xác. Tôi không biết vấn đề là gì, nhưng các ví dụ bên dưới vẫn là phương pháp hợp lệ.}

---

Thiết lập một phong cách với JavaScript thường theo định dạng sau:

document.getElementById("abc").style.[css property name in camel case] = "[value]"; 

• Basic Example
• Event-triggered Example

Nếu sử dụng jQuery, nó trở thành một chút bụi:

// find all elements with the tag name "bar" that are direct 
// descendants of an element with the class name "foo" 
$(".foo > BAR").css("color", "red"); 

// set multiple properties 
$(".foo > BAR").css({ color: "red", "background-color": "beige" });