Quelle est la raison pour laquelle la sortie de la console JS est vide et la modification du style n'est pas valide? Comment le résoudre?

Dépannage et résolution de la défaillance des blancs de sortie de la console JavaScript et modification du style

Dans le code JavaScript, si vous essayez de modifier top d'un élément, la sortie de la console est vide et la modification n'est pas valide, généralement en raison de la mauvaise façon d'accès et de modification du style d'élément. Le problème peut être que vous utilisez element.style.top directement pour manipuler les styles définis dans la feuille de style CSS. element.style.top n'agit que sur le style en ligne de l'élément et ne peut pas modifier les styles définis par des feuilles de styles externes ou des feuilles de styles internes.

Par exemple, si l'attribut top de l'élément .sidebar_right ul est défini via une feuille de style CSS, sidebarright.style.top renverra une chaîne vide. Pour modifier correctement le style, il est recommandé d'utiliser les deux méthodes suivantes:

Méthode 1: Utilisez window.getComputedStyle() pour obtenir le style calculé

window.getComputedStyle() peut obtenir le style final calculé de l'élément, y compris les styles en ligne, les feuilles de style externe et les styles dans les feuilles de style interne. Nous pouvons l'utiliser pour obtenir top de l'élément, puis le modifier:

 const SideBarRright = document.QuerySelector ('. Sidebar_Right UL');
const closebtn = document.getElementById ('closebtn'); // Assurez-vous que CloseBtn est défini CloseBtn.OnClick = fonction () {
  // ... autres codes ...
  const CompudStyle = window.getCompuledStyle (SideBarRight);
  Soit topValue = paSeInt (calculdStyle.getPropertyValue ('top'), 10); // Convertissez la chaîne en un nombre et spécifiez 10 comme le radix Let NewTop = topValue - 80;
  SideBarRright.Style.top = `$ {newtop} px`;
};

Ce code utilise d'abord getComputedStyle() pour obtenir la valeur d'attribut top de l'élément sidebarright , le convertir en nombre, calculer la nouvelle valeur top et enfin l'attribuer à style.top de l'élément.

Méthode 2: Utilisez le nom de la classe CSS pour contrôler le style

Une manière plus concise et élégante consiste à définir une nouvelle classe dans la feuille de style CSS, comme .moved , pour représenter l'état après le mouvement:

 .Moved {
  En haut: 180px; / * ou autre valeur requise * /
}

Ensuite, dans le code JavaScript, contrôlez le style de l'élément en ajoutant ou en supprimant le nom de classe:

 const SideBarRright = document.QuerySelector ('. Sidebar_Right UL');
const closebtn = document.getElementById ('closebtn'); // Assurez-vous que CloseBtn est défini CloseBtn.OnClick = fonction () {
  // ... autres codes ...
  SideBarRright.classList.add («Move»);
};

Cette méthode gère les styles via les noms de classe CSS, ce qui facilite le maintien et l'extension.

Astuce importante: assurez-vous que les variables telles que topAd , locationItem , myJD , closebtn , closeBtn et d'autres variables sont correctement définies et initialisées dans le cadre de la fonction onclick . La dénomination des variables dans le code est incohérente et il est recommandé d'unifier la spécification de dénomination. Utilisez const ou let pour déclarer les variables pour améliorer la lisibilité au code et la maintenabilité. Utilisez le modèle littéral ${} pour créer des chaînes pour rendre le code plus concis. Ajoutez un mécanisme de gestion des erreurs, tel que la vérification si un élément existe.

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!