Проверка, поддерживается ли свойство CSS тегом [duplicate]

0

В моем проекте мне нужно убедиться, что я могу применить определенное свойство CSS к элементу HTML. Например, мне нужно проверить, поддерживается ли свойство "color" тегом "img". Я помню, где-то читал, что приведенный ниже код может быть использован для проверки.

 var image = document.createElement('img');
    if(image.style.color)
        image.style.color = "blue";

Но это возвращает неправильный результат. Если кто-то знает, как можно проверить, поддерживается ли свойство элементом html, ответьте.

Благодарю.

  • 0
    нет, это не дубликат те о совместимости браузера. Это касается поддержки определенного тега. Мне нужно это в моем проекте. Пожалуйста, не закрывайте его
  • 0
    Любой элемент может теоретически поддерживать любое свойство, даже если оно может не иметь видимого эффекта или если оно не имеет смысла интуитивно. Я не думаю, что вы можете проверить это.
Показать ещё 2 комментария
Теги:

3 ответа

2
Лучший ответ

Если вы хотите узнать, присутствует ли свойство объекта в объекте, вы можете сделать что-то вроде:

var image = document.createElement('img');
for (var key in image.style) {
    if (key == "color") image.style.key = "blue";
}

Предупреждение 1: как утверждают другие, эта проверка может иметь мало смысла, кроме случаев, связанных с конкретными лицами;

Предупреждение 2: верхний код проверяет, присвоил ли браузер или пользователь свой объект объекту (например, какой-то браузер, такой как Webkit, делает это для style, другие могут не делать этого, как старый IE).

Поделиться
  • 0
    Было бы быстрее сделать ччек следующим образом: if ("color" в image.style) {...}
4

Буквально этот код просто проверяет, есть ли color свойства в объекте родного style элемента. Он не обещает ничего относительно действительности такого имущества. Действительно, вы можете хранить любое свойство объекта; независимо от того, имел ли он стилистический эффект, другой вопрос.

JavaScript не является преподавателем CSS, и поэтому у него на самом деле нет механизма для сообщения о том, эффективны ли примененные стили. Ближайшая вещь, о которой я могу думать, - сделать какую-то итеративную развертку по элементам, вычисленным стилям (но даже тогда вам нужно будет предоставить этот список стилей, то есть рассказать, для чего он перебирается) и сравнить их значения до и после применение данного свойства.

Однако это было бы неудобно, потому что браузер может сообщать стиль в стиле, отличном от того, в котором вы его применили. Например, вы можете установить цвет как HEX, но он может быть указан из вычисленных стилей как RGB (a).

Поделиться
  • 1
    Очень поучительный ответ на вопрос. Некоторое время я размышлял над тем же вопросом и пришел к тому же выводу.
  • 0
    Привет, мне не нужно проверять, если свойство действительно. Я хочу проверить, относится ли свойство к этому тегу.
Показать ещё 1 комментарий
3

По спецификациям CSS все свойства могут быть установлены для всех элементов. Они могут не иметь потенциального влияния на элемент ("применять к нему", использовать терминологию CSS, которая немного нечетна), но это зависит от других свойств элемента. Например, width не применяется к элементу span, но если вы установите display: inline-block на элементе, к нему применяется width.

Более того, например, свойство color безусловно, "относится к" элементу img, но влияет ли оно на рендеринг, является другой проблемой. В основном это не так, но если изображение недоступно, текст alt появляется (или должен появляться) в объявленном цвете.

Поэтому вы должны подумать о том, что вам действительно нужно знать и почему.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню