Maison > Article > interface Web > paramètres js css

paramètres js css

王林original: 2023-05-29 14:15:09604parcourir

JavaScript et CSS sont deux technologies de base pour le développement Internet. JavaScript est un langage de script utilisé pour ajouter dynamiquement des effets interactifs et une expérience utilisateur aux pages Web ; CSS est un langage de style utilisé pour embellir les pages Web et définir leur affichage. Dans cet article, nous verrons comment configurer JavaScript et CSS pour une conception Web et une expérience utilisateur optimales.

1. Paramètres JavaScript

1.1 Introduction de JavaScript

L'introduction de JavaScript dans un document HTML nécessite généralement l'utilisation de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a La meilleure façon d'inclure JavaScript dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e est d'utiliser l'option async ou defer. La différence est que l'option async indique que le script sera exécuté lors du téléchargement (c'est-à-dire une exécution asynchrone), tandis que l'option defer indique que le script ne sera pas exécuté tant que le document n'est pas téléchargé. Par exemple :

<head>
  <script src="example.js" async></script>
  <script src="example.js" defer></script>
</head>

1.2 Utiliser du JavaScript externe

L'avantage d'utiliser des fichiers JavaScript externes est de réutiliser le code dans plusieurs documents et d'assurer la cohérence. En référençant des fichiers JavaScript externes, vous pouvez séparer le code du document HTML, rendant ainsi le document HTML plus concis. Par exemple :

<head>
  <script src="example.js"></script>
</head>

1.3 Redirection de page

En JavaScript, vous pouvez utiliser l'attribut location de l'objet window pour rediriger la page vers une autre page comme suit : # 🎜🎜#

window.location.href = "https://www.example.com";

Ce code redirige la page vers "https://www.example.com".

1.4 Ajouter un écouteur d'événement

Les écouteurs d'événement sont utilisés pour effectuer certaines opérations lorsqu'un événement se produit. En JavaScript, utilisez la méthode addEventListener() pour ajouter un écouteur d'événement. Par exemple :

document.addEventListener("click", function() {
  // 执行一些操作
});

Ce code exécutera une fonction lorsque l'utilisateur clique sur le document.

1.5 Manipulation des éléments DOM

DOM (Document Object Model) peut être utilisé pour manipuler des éléments dans des documents HTML et XML. En JavaScript, les éléments DOM peuvent être obtenus via la méthode getElementById(), la méthode getElementsByClassName(), la méthode getElementsByTagName(), etc. Par exemple :

document.getElementById("example").innerHTML = "Hello, world!";

Ce code définit l'attribut innerHTML de l'élément DOM avec l'ID "exemple" sur "Bonjour tout le monde !".

1.6 Ajouter des éléments à un tableau

En JavaScript, vous pouvez utiliser la méthode push() pour ajouter des éléments à un tableau. Par exemple :

var fruits = ["apple", "banana", "orange"];
fruits.push("pear");

Ce code ajoute "Poire" à la fin du tableau nommé fruits.

2. Paramètres CSS

2.1 Feuille de style externe

Les feuilles de style externes peuvent être utilisées pour permettre à plusieurs documents de partager le même style. Vous pouvez rendre votre document HTML plus propre en plaçant votre feuille de style dans un fichier CSS distinct, puis en référençant ce fichier dans votre document HTML. Par exemple :

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Ce code place la feuille de style dans un fichier appelé styles.css.

2.2 Feuilles de style internes

Les feuilles de style peuvent être placées dans un document HTML en ajoutant une balise c9ccee2e6ea535a969eb3f532ad9fe89 à la balise 93f0f5c25f18dab9d176bd4f6de5d30e Par exemple :

<head>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>

Ce code définit la couleur d'arrière-plan du document sur jaune.

2.3 Sélecteurs

Les sélecteurs peuvent être utilisés pour sélectionner les éléments auxquels les styles doivent être appliqués. En CSS, les sélecteurs sont utilisés pour spécifier la portée des styles. CSS propose plusieurs types de sélecteurs différents, notamment des sélecteurs de classe, des sélecteurs d'ID, des sélecteurs d'éléments et des sélecteurs d'attributs. Par exemple :

h1 {
  font-size: 24px;
}

.example {
  background-color: blue;
}

#example {
  color: green;
}

[example="true"] {
  border: 2px solid red;
}

Ce code définit la taille de la police de l'élément h1 sur 24 pixels, la couleur d'arrière-plan de l'élément avec le nom de classe .example est définie sur bleu et la couleur de l'élément avec l'exemple d'ID est défini sur vert, les éléments avec la valeur d'attribut d'exemple true ont leurs bordures définies sur rouge.

2.4 Disposition et positionnement

En utilisant l'attribut position et les attributs top, bottom, left et right, les éléments peuvent être disposés et positionnés en CSS. Par exemple :

#example {
  position: absolute;
  top: 100px;
  left: 50px;
}

Ce code positionne de manière absolue l'élément avec l'ID exemple à 100 pixels du haut du document et à 50 pixels de la gauche.

2.5 Effets d'animation

En utilisant les propriétés d'animation de CSS, vous pouvez créer des effets d'animation pour les éléments. Par exemple :

#example {
  animation-name: example-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes example-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

Ce code applique un effet d'animation à l'élément avec l'exemple d'ID qui se déplace de 100 pixels vers la gauche jusqu'à sa position. Cet effet d'animation est nommé exemple-animation et se répète à l'infini en 2 secondes.

CONCLUSION

JavaScript et CSS sont des technologies clés nécessaires à la création d'applications Internet modernes. Des paramètres JavaScript et CSS corrects peuvent améliorer considérablement la convivialité et l’expérience utilisateur de votre page. Dans cet article, nous avons expliqué comment configurer JavaScript et CSS pour une conception Web et une expérience utilisateur optimales.

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!

JavaScript css html xml JS 对象事件 dom 异步 location innerHTML 选择器样式表 position animation https

Déclaration：

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

Article précédent：IE11 javascript2.0 invalideArticle suivant：IE11 javascript2.0 invalide

Articles Liés

Voir plus