невозможно изменить <label>цвет текста - PullRequest
Новая
       7

невозможно изменить <label>цвет текста

5 голосов
/ 08 марта 2012

Мое исследование базового HTML-элемента DOM говорит об этом для свойства "style" любого элемента DOM (из http://www.w3schools.com/jsref/dom_obj_all.asp):

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

Тег 'label' является элементом dom. И поэтому он имеетсвойство 'style'. Как указано в ссылке на w3schools выше, все элементы dom имеют свойство 'style'.

И на самом деле, здесь я устанавливаю (встроенное) свойство 'style' для label tag - и это прекрасно работает: 

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

Цвет текста метки серый во время загрузки страницы.

При определенных условиях (пользователь указал, что ониВы готовы выбрать изображение для загрузки) - мне нужно показать загрузку как «включенную», изменив начальный серый цвет текста вышеупомянутого на черный.

Знаю ли я, что могу использовать класс cssдля цвета текста этой метки и используйте свойство 'className', чтобы динамически изменить класс css выше? Вы держите пари, что я делаю. Сегодня вечером, хотя я держу ноги этого элемента DOM в огне. У меня просто есть один атрибут 'style' дляизменить (цвет текста) и не хочу добавлятькласс только для этого - то, что я пытаюсь здесь, должно работать в соответствии с документами.

Я хочу знать, почему я не могу использовать свойство 'style', поскольку DOM говорит, что я могу - "get "AND" set "Свойства элемента DOM.

Здесь я" set "- свойство my стиля - это НИЧЕГО - текст метки остается серым: 

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

Также это не меняет цвет с серого на черный: 

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

Приведенный выше код выполняется (в javascript) после метка уже видна на странице, и вответ на событие onclick кнопки в форме, частью которой также является метка.

Есть ли ошибка в способности "установить" свойство style элемента DOM?В соответствии с 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......)

Так почему же я не могу изменить свойство элемента 'style' в моем коде выше?

1 Ответ

8 голосов
/ 08 марта 2012

После рассмотрения этого ответа в 2017 году оригинальный пример установки всей строки стиля работает правильно. Я не знаю, в чем проблема, но приведенные ниже примеры все еще являются действительными подходами.

Настройка стиля с помощью JavaScript обычно выполняется в следующем формате: 

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

Если использовать jQuery, он становится немного чище: 

// 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" });
...