Menu
i got a piece of html
<img style="cursor: pointer; width: auto; height: auto; display: inline;" src="http://www.kidsgen.com/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?
678
For example with Google Chrome, you can right-click on any element, such as an image, and choose "Inspect Element". That will open the Developer Tools window. From there, click on the tab called "Resources". That will show a complete list of files, including images, that the page is using.
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types.
Images or wrapper elements that have display: none set, will still get loaded. So if you want to eg. load a different image for desktop and mobile, you can either: use display: none , but with the loading="lazy" parameter set on img .
Some CSS properties, such as color or font-family , are automatically inherited, but others, such as display or margin , aren't.
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.com/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');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
