Définir les propriétés des éléments HTML à l'aide de JavaScript: Méthodes modernes

Les entités JavaScript, en tant que caractéristique de Netscape Navigator 3.x, n'ont pas été largement utilisées. Par conséquent, il n'est plus possible de définir les propriétés des éléments HTML en s'appuyant sur cette méthode. Au lieu de cela, le JavaScript moderne fournit une solution plus fiable et générale.

Ce qui suit décrit une façon moderne de définir dynamiquement les propriétés des éléments HTML à l'aide de JavaScript, avec un exemple de code.

1. Obtenez la saisie de l'utilisateur

Tout d'abord, nous devons obtenir la largeur et la hauteur de l'image fournies par l'utilisateur. Vous pouvez utiliser la fonction invite () pour afficher une boîte de dialogue qui invite l'utilisateur à saisir la valeur.

 fonction getImageDimensions () {
  LET LOWTH = invite ("Veuillez saisir la largeur d'image:");
  LET LETH = invite ("Veuillez entrer la hauteur de l'image:");

  // Vérifiez que l'entrée est un nombre si (isnan (largeur) || iSnan (hauteur)) {
    alert ("Veuillez entrer un numéro valide!");
    retourner null; // ou renvoyer la valeur par défaut}

  largeur = parseInt (largeur); // convertir la chaîne en hauteur entière = parseInt (hauteur); // convertir la chaîne en entier return {width, height};
}

2. Obtenez des éléments d'image

Ensuite, nous devons obtenir les éléments d'image en HTML. Vous pouvez utiliser la méthode document.getElementById (), à condition que l'élément d'image ait un ID unique.

 <img id="myimage" src="gun1.jpg" alt="image">

 const image = document.getElementById ("MyImage");

3. Définir les propriétés de l'image

Enfin, nous définissons les valeurs de largeur et de hauteur obtenues sur les propriétés de largeur et de hauteur de l'élément d'image.

 fonction setImageDimensions () {
  const dimensions = getImageDimensions ();

  if (dimensionals) {
    image.width = dimensions.width;
    image.height = dimensions.height;
  }
}

// Appelez cette fonction une fois le chargement de page terminé Window.onLoad = SetImageDimensions;

Exemple de code complet:

 


  
  <img id="myimage" src="gun1.jpg" alt="image">

Notes:

• Assurez-vous que l'utilisateur entre un numéro valide. La fonction isnan () peut être utilisée pour la vérification.
• Convertissez la chaîne entrée par l'utilisateur en un type numérique, vous pouvez utiliser les fonctions parseInt () ou parsefloat ().
• Assurez-vous que l'élément d'image a un ID unique afin qu'il puisse être obtenu à l'aide de la méthode document.getElementById ().
• Appelez la fonction SetImageDimensions () après le chargement de la page pour s'assurer que les éléments d'image ont été chargés. Vous pouvez utiliser le gestionnaire d'événements Window.onload.
• La fonction EVAL () présente des risques de sécurité et doit être évité autant que possible. Le code ci-dessus utilise parseInt () au lieu d'EVAL () pour la sécurité.

Résumer:

En utilisant la technologie JavaScript moderne, nous pouvons facilement définir dynamiquement les propriétés des éléments HTML sans compter sur des entités JavaScript obsolètes. Cette méthode est non seulement plus fiable, mais aussi plus sûre. Comprendre et maîtriser l'utilisation du JavaScript moderne peut aider les développeurs à créer des applications Web plus robustes et compatibles. N'oubliez pas que la mise à jour des connaissances en temps opportun et que l'adoption de nouvelles normes techniques est la clé pour devenir un excellent développeur Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!