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

Question

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

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

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

Спасибо.

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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