admin管理员组

文章数量:1415420

i got a piece of html

<img style="cursor: pointer; width: auto; height: auto; display: inline;" src=".gif" alt="rapunzel" title="rapunzel" align="right">

and even if i set display: inline; in its style, when i'm trying to get its css display property like this:

alert($('img:first').css('display'))

or

var el=document.getElementsByTagName('img')[0]
alert(document.defaultView.getComputedStyle(el,null)['display'])

it always gives me value block.

what's wrong?

i got a piece of html

<img style="cursor: pointer; width: auto; height: auto; display: inline;" src="http://www.kidsgen./fables_and_fairytales/images/rapunzel.gif" alt="rapunzel" title="rapunzel" align="right">

and even if i set display: inline; in its style, when i'm trying to get its css display property like this:

alert($('img:first').css('display'))

or

var el=document.getElementsByTagName('img')[0]
alert(document.defaultView.getComputedStyle(el,null)['display'])

it always gives me value block.

what's wrong?

  • javascript
  • html
  • css
  • properties
Share Improve this question edited Apr 13, 2013 at 23:49 İsmet Alkan 5,4474 gold badges43 silver badges64 bronze badges asked Apr 13, 2013 at 23:26 SuperYegoriusSuperYegorius 80410 silver badges26 bronze badges 2
  • 3 Use an inspector and trace the style, maybe there is a display: block !important somewhere – David Nguyen Commented Apr 13, 2013 at 23:29
  • i've just checked image styles in firebug. there are no such styles as display: block !important or display: block – SuperYegorius Commented Apr 13, 2013 at 23:42
Add a ment  | 

2 Answers 2

Reset to default 4

The align='right' property assignment is causing the img element to have its display property set to 'block'. Your code without the align='right' propery will alert 'inline' on jsFiddle.

<body>
    <img style="cursor: pointer; width: auto; height: auto; display: inline;" src="http://www.kidsgen./fables_and_fairytales/images/rapunzel.gif" alt="rapunzel" title="rapunzel" />
</body>

alert($('img:first').css('display')); // alerts 'inline'

A relevant piece of extra information is img tags are in fact inline elements by default. However, with align='right' set inside the img tag, I was unable to set the display property back to inline even by inserting this line of code:

$('img:first').css('display', 'inline');

Its because you have align="right" in the image tag;

That CSS rule is used to align block elements (Learn more).

本文标签： javascripthow to get image true css display propertyStack Overflow

版权声明：本文标题：javascript - how to get image true css display property - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745236491a2649070.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。