0

In my project I need to make sure if I can apply a particular CSS property to an HTML element. For example, I need to check if 'color' property is supported by 'img' tag. I remember reading somewhere that the code below could be used to check it. 

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

But this is returning wrong result. If someone knows how it is possible to check if a property is supported by an html element, then please answer.

Thanks.

Sameeksha Kumari
  • 1,158
  • 2
  • 16
  • 21
  • no, it is not duplicate. those are about browser compatibility. This is about support for a particular tag. I need this in my project. Please dont close it – Sameeksha Kumari Oct 03 '13 at 12:43
  • Any element can theoretically support any property, even if it may have no apparent effect or if it doesn't make sense intuitively. I don't think you can check this. – BoltClock Oct 03 '13 at 12:43
  • 1
    As a bit of trivia: `color` is a valid style property for the `img` element. If an image doesn't load, for accessibility reasons its `alt` attribute is often displayed instead. Most browsers will apply the `color` declaration to this text: http://jsfiddle.net/JamesD/XsqJb/ – James Donnelly Oct 03 '13 at 12:53
  • Thanks @JamesDonnelly. That as helpful – Sameeksha Kumari Oct 03 '13 at 13:02

3 Answers3

4

Literally, that code merely checks whether there is the property color on the element's native style object. It does not promise anything regarding the validity of such a property. Indeed, you could store any property on the object; whether or not it had a stylistic effect is another question.

JavaScript is not a teacher of CSS, and so it does not really have a mechanism for reporting whether or not applied styles were effectual. The nearest thing I can think of is to do some sort of iterative sweep over the element's computed styles (but even then, you would need to supply that list of styles, i.e. tell it which to iterate over) and compare their values before and after the application of a given property.

This would be clunky, however, because the browser may report the style in a manner different from that in which you applied it. For example, you may have set a colour as HEX, but it may be reported out from the computed styles as RGB(a).

Mitya
  • 33,629
  • 9
  • 60
  • 107
  • 1
    A very enlightening answer to the question. I was pondering over the same question for some time and came to the same conclusion. – The Dark Knight Oct 03 '13 at 12:42
  • hi, i dont need to check if the property is valid. I want to check if property applies to that tag. – Sameeksha Kumari Oct 03 '13 at 12:45
  • 1
    In the context of CSS properties, isn't that the same thing? A style 'applies' to a tag in the sense that it does or does not cause a stylistic change to its appearance or behaviour. – Mitya Oct 03 '13 at 12:54
3

By CSS specifications, all properties can be set to all elements. They may not have a potential effect on an element (“apply to” it, to use CSS terminology, which is a bit odd), but this depends on other properties of the element. For example, width does not “apply to” a span element, but if you set display: inline-block on the element, width applies to it.

Moreover, e.g. the color property surely “applies to” an img element, but whether it really affects rendering is a different issue. It mostly does not, but if the image is not available, the alt text appears (or should appear) in the declared color.

So you should consider what you really need to know and why.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
2

If you want to know if a particoular property is present into an object you can do something like:

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

Warning 1: as said by others this check might have little sense, apart from particoular cases;

Warning 2: the upper code checks if the browser or the user has assigned a property to the object (eg. some browser like Webkit based do this for style, some other may not do it, like old IE).

guari
  • 3,715
  • 3
  • 28
  • 25