Maison interface Web js tutoriel 关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery

关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery

May 16, 2016 pm 06:14 PM
标签

先来看现象:

复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<div id='aa' style='width:200px;height:200px;' /></script>
");
alert($("#aa").width());
});


结果为:200
所有浏览器都得到正确的结果

把插入的元素改为IMG
复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' / alt="关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery" >"); <BR>alert($("#aa").width()); <BR>}); <BR></script>

(注:image1.jpg的实际宽为693)

结果为:
Opera:34
Firefox:0
IE:28
Chrome:0
Safari:0

再F5刷新一下,结果为:
Firefox:693
IE:693
Opera:693
Chrome:0
Safari:0
Safari和Chrome始终为0。

应该可以理解为在图片没有加载或呈现完成时计算出的图片宽高也是不正确的,刷新后应该是有了缓存,所以结果就正确了,但为什么Chrome

和Safari始终都为0呢?而且IE和OPERA居然一开始还会计算出一个错误值出来的。
改成下面这样就都好了:
复制代码 代码如下:


<script> <BR>$(document).ready(function() { <BR>$("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' / alt="关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery" >"); <BR>window.setTimeout(function(){alert($("#aa").width()); },100); <BR>}); <BR></script>

有解决过此问题或有关于此问题更详细的认识的大鸟还望不吝赐教..
复制代码 代码如下:

$(document).ready(function() {
$("#cc").append("关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题_jquery");
$("#aa").load(function(){
alert($("#aa").width()
}).attr("src", "http://www.jb51.net/images/logo.gif");
});
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment rechercher du texte dans tous les onglets de Chrome et Edge Comment rechercher du texte dans tous les onglets de Chrome et Edge Feb 19, 2024 am 11:30 AM

Ce didacticiel vous montre comment rechercher du texte ou des phrases spécifiques sur tous les onglets ouverts dans Chrome ou Edge sous Windows. Existe-t-il un moyen d'effectuer une recherche de texte sur tous les onglets ouverts dans Chrome ? Oui, vous pouvez utiliser une extension Web externe gratuite dans Chrome pour effectuer des recherches de texte sur tous les onglets ouverts sans avoir à changer d'onglet manuellement. Certaines extensions comme TabSearch et Ctrl-FPlus peuvent vous aider à y parvenir facilement. Comment rechercher du texte dans tous les onglets de Google Chrome ? Ctrl-FPlus est une extension gratuite qui permet aux utilisateurs de rechercher facilement un mot, une expression ou un texte spécifique dans tous les onglets de la fenêtre de leur navigateur. Cette extension

Comment ajouter des tags sur Douyin pour attirer du trafic ? Quelles balises de la plateforme sont les plus faciles à attirer du trafic ? Comment ajouter des tags sur Douyin pour attirer du trafic ? Quelles balises de la plateforme sont les plus faciles à attirer du trafic ? Mar 22, 2024 am 10:28 AM

En tant que plateforme sociale de courtes vidéos populaire, Douyin dispose d’une énorme base d’utilisateurs. Pour les créateurs Douyin, utiliser des balises pour attirer du trafic est un moyen efficace d'augmenter l'exposition du contenu et d'attirer l'attention. Alors, comment Douyin utilise-t-il les balises pour attirer du trafic ? Cet article répondra à cette question en détail pour vous et présentera les techniques associées. 1. Comment ajouter des tags sur Douyin pour attirer du trafic ? Lorsque vous publiez une vidéo, assurez-vous de choisir des balises pertinentes par rapport au contenu. Ces balises doivent couvrir le sujet et les mots-clés de votre vidéo pour permettre aux utilisateurs de trouver plus facilement votre vidéo grâce aux balises. Tirer parti des hashtags populaires est un moyen efficace d’augmenter la visibilité de votre vidéo. Recherchez les balises et les tendances populaires actuelles et intégrez-les dans vos descriptions et balises vidéo. Ces balises populaires ont généralement une plus grande visibilité et peuvent attirer l’attention d’un plus grand nombre de téléspectateurs. 3. Étiquette

Quelle est l'horloge derrière le label TikTok ? Comment taguer le compte Douyin ? Quelle est l'horloge derrière le label TikTok ? Comment taguer le compte Douyin ? Mar 24, 2024 pm 03:46 PM

Lorsque nous parcourons les œuvres de Douyin, nous voyons souvent une icône d'horloge derrière la balise. Alors, quelle est exactement cette horloge ? Cet article se concentrera sur la discussion sur « Quelle est l'horloge derrière le label Douyin », dans l'espoir de fournir une référence utile pour votre utilisation de Douyin. 1. Quelle est l'horloge derrière le label Douyin ? Douyin lancera des défis thématiques d'actualité. Lorsque les utilisateurs participeront, ils verront une icône d'horloge après la balise, ce qui signifie que l'œuvre participe au défi thématique et affichera le temps restant du défi. Pour certains contenus urgents, tels que les vacances, les événements spéciaux, etc., Douyin apposera une icône d'horloge après l'étiquette pour rappeler aux utilisateurs la période de validité du contenu. 3. Balises populaires : lorsqu'une balise devient populaire, Douyin ajoutera une icône d'horloge derrière la balise pour indiquer que la balise est

Quelle est la différence entre l'en-tête et l'en-tête de la balise html5 ? Quelle est la différence entre l'en-tête et l'en-tête de la balise html5 ? Jan 17, 2022 am 11:10 AM

Différences : 1. La balise head est utilisée pour définir l'en-tête du document, qui est un conteneur pour tous les éléments head, et la balise header est utilisée pour définir l'en-tête (informations d'introduction) du document 2. Tous les navigateurs prennent en charge le ; balise head et anciennes versions des navigateurs Aucun des navigateurs ne prend en charge la balise d'en-tête et les navigateurs tels que IE9+ et versions ultérieures doivent prendre en charge la balise d'en-tête.

Un examen plus approfondi de l'élément vidéo en HTML Un examen plus approfondi de l'élément vidéo en HTML Feb 24, 2024 pm 08:18 PM

Explication détaillée de la balise vidéo en HTML La balise vidéo en HTML5 est une balise utilisée pour lire des vidéos sur des pages Web. Il peut restituer des vidéos en utilisant différents formats, tels que MP4, WebM, Ogg, etc. Dans cet article, nous présenterons en détail l’utilisation de la balise vidéo et fournirons des exemples de code spécifiques. Structure de base Voici la structure de base de la balise vidéo :

Comment supprimer les balises de contact externes sur l'application DingTalk Comment supprimer les balises de contact externes sur l'application DingTalk Feb 24, 2024 am 08:20 AM

Comment supprimer les balises de contact externes sur l'application DingTalk ? DingTalk a une fonction pour supprimer les balises de contact externes, mais la plupart des amis ne savent pas comment supprimer les balises de contact externes sur DingTalk. Vient ensuite le guide DingTalk que l'éditeur propose aux utilisateurs. sur la façon de supprimer les balises de contact externes dans l'application Ding. Les utilisateurs intéressés peuvent venir y jeter un œil ! Comment supprimer les balises de contact externes dans l'application DingTalk 1. Ouvrez d'abord l'application DingTalk et cliquez sur la fonction [Gestion] comme indiqué ci-dessous sur la page principale. 2. Entrez ensuite dans l'interface de gestion d'entreprise et recherchez [Contacts externes] ; Sur la page de fonction de configuration des contacts externes, sélectionnez le service [Gestion des étiquettes] ; 4. Ensuite, sur la page principale des étiquettes de contact, sélectionnez le type de groupe d'étiquettes que vous souhaitez supprimer. 5. Enfin, cliquez sur le groupe d'étiquettes rouges ;

Comment implémenter une mise en page avec un menu de navigation fixe en utilisant HTML et CSS Comment implémenter une mise en page avec un menu de navigation fixe en utilisant HTML et CSS Oct 26, 2023 am 11:02 AM

Comment utiliser HTML et CSS pour implémenter une mise en page avec un menu de navigation fixe. Dans la conception Web moderne, les menus de navigation fixes sont l'une des mises en page courantes. Il peut maintenir le menu de navigation toujours en haut ou sur le côté de la page, permettant aux utilisateurs de parcourir facilement le contenu Web. Cet article explique comment utiliser HTML et CSS pour implémenter une mise en page avec un menu de navigation fixe et fournit des exemples de code spécifiques. Tout d'abord, vous devez créer une structure HTML pour présenter le contenu de la page Web et le menu de navigation. Voici un exemple simple

Comment implémenter une zone de saisie étiquetée à l'aide de Vue ? Comment implémenter une zone de saisie étiquetée à l'aide de Vue ? Jun 25, 2023 am 11:54 AM

Avec le développement des applications Web, les zones de saisie étiquetées deviennent de plus en plus populaires. Ce type de zone de saisie permet aux utilisateurs de saisir des données plus facilement et facilite également la gestion et la recherche des données saisies. Vue est un framework JavaScript très puissant qui peut nous aider à implémenter rapidement des zones de saisie étiquetées. Cet article explique comment utiliser Vue pour implémenter une zone de saisie étiquetée. Étape 1 : Créer une instance Vue Tout d'abord, nous devons créer une instance Vue sur la page, le code est le suivant : &l

See all articles