Image tag style.height not overriding css class height?

Question

Css

.myStyle {
height: 10px;
background-image: url(../myImage.png);
}

html

<img class=myStyle src=<%scriptlet%> >

Now the problem is in my js, i have written a error handler for this img tag, which would set the height to 0px. This 0px comes as style.height=0px but does not override height of class myStyle.

js

myImage = $('.myStyle', $el);
myImage.error(function () {
           myImage.attr('style.height', '0px');
});

Answer 1

change:

myImage.attr('style.height', '0px');

to

myImage.css('height', '0');

To get background image, you can use getting, like

myImage.css("background");

OR

myImage.css("backgroundImage")

Answer 2

Use this:

myImage.height(0);

Instead of:

myImage.attr('style.height', '0px');

The attr() is made for attribute manipulation, so in order for the later declaration to work, you may also change it to:

myImage.attr('style', 'height: 0px;');

See attr() on the jQuery docs .

Answer 3

使用此代替：

myImage.height('10px');

Answer 4

myImage.style.height = '0px';

这也将起作用。