Paramétrage Js et obtention des méthodes de style d'élément

1. Utilisez les événements onmouseover et onmouseout pour définir le changement de style de texte lorsque la souris entre et sort.

2. Deux façons d'utiliser les feuilles de style externes.

• 1. Utilisez des balises pour vous connecter à des fichiers externes.

• 2. Utilisez la méthode @import pour importer des feuilles de style externes.

  La différence entre les ancêtres. Link appartient à la balise XHTML et @import est entièrement une méthode fournie par CSS. En plus de charger du CSS, la balise link peut également faire bien d'autres choses, comme définir RSS, définir les attributs de connexion rel, etc. @import ne peut charger que du CSS.
  Différence dans l'ordre de chargement. Lorsqu'une page est chargée (c'est-à-dire lorsqu'elle est visualisée par un spectateur), le CSS référencé par lien sera chargé en même temps, tandis que le CSS référencé par @import attendra que la page soit complètement téléchargée avant d'être chargée. Ainsi, parfois, en parcourant une page où @import charge du CSS, il n'y aura pas de style au début, puis tout d'un coup le style apparaîtra, ce qui est assez évident lorsque la vitesse du réseau est lente.

  Différences de compatibilité. Puisque @import a été proposé par CSS2.1, les anciens navigateurs ne le prennent pas en charge. @import ne peut être reconnu que par IE5 ou supérieur, mais la balise link n'a pas ce problème.
  La différence lors de l'utilisation de DOM pour contrôler les styles.
  Lorsque vous utilisez JavaScript pour contrôler le dom afin de changer le style, vous ne pouvez utiliser que la balise de lien, car @import n'est pas contrôlable par le dom.
  Par conséquent, il est recommandé d'utiliser un lien pour introduire des styles sans circonstances particulières, et d'essayer d'éviter d'utiliser @import

• La différence entre les deux :
  Essentiellement , ces deux méthodes servent toutes deux à charger des fichiers CSS, mais il existe encore des différences subtiles.

3. Changez dynamiquement le style des éléments de la page.

• 1. Utilisez la série de méthodes getElement pour accéder aux éléments.

• 2. Modifier les attributs de style :

  （1）style属性
  （2）className属性
  HTML元素.style.样式属性＝"值"
  document.getElementById("titles").style.color="#ff0000";

  Copier après la connexion

4. Utilisez les fonctions pour modifier les effets du menu

• .

  Définissez l'état initial de chaque balise li

• Définissez deux styles superposés, indiquant l'effet du déplacement de la souris vers le menu et de la sortie du menu

  var len=document.getElementsByTagName("li");
      for(var i=0;i<len.length;i++){
          len[i].onmouseover=function(){
              this.className="over";
          }
          len[i].onmouseout=function(){
              this.className="out";
          }       
  }

  Copier après la connexion

5. Application du style d'accès JavaScript.

• Méthodes pour obtenir des styles :

   document.getElementById(elementId).样式属性值
   var pObj=document.getElementById("test");
   var objTop=pObj.style.top;

  Copier après la connexion

• Méthodes pour obtenir des styles internes (intégrés) et externes :

  currentStyle    //IE
  getComputedStyle()
  //其他浏览器
  var pObj=document.getElementById("test");
  
  var objTop= pObj.currentStyle.top;
  
  var objTop =document.defaultView.getComputedStyle(pObj,null).top;

  Copier après la connexion

• Obtenez la distance de défilement de la barre de défilement :

  Lorsque la page est chargée, obtenez la position spécifique du calque où se trouve l'image, c'est-à-dire les positions gauche et supérieure de la page

  Obtenir la page initiale Lors du positionnement, il faut déterminer le type du navigateur actuel

  Lorsque la barre de défilement défile, obtenir la distance entre la barre de défilement et le haut et côté gauche de la page (pour déterminer le type du navigateur actuel), et en même temps modifier la distance entre les couches par rapport aux positions supérieure et gauche.

  if (document.documentElement && document.documentElement.scrollTop) {//Firefox\IE浏览器
  
  adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
  
  adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
  } else if (document.body) {// Safari、Chrome浏览器
      adverObject.style.top=adverTop+parseInt(document.body.scrollTop)+"px";
  adverObject.style.left=adverLeft+parseInt(document.body.scrollLeft)+"px";
  }

  Copier après la connexion

• scrollTop Définit ou obtient la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre

• scrollLeft Définit ou obtient la distance entre le bord gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre

• clientWidth La largeur du contenu visible dans le navigateur, à l'exclusion des barres de défilement et autres bords, cela changera avec la taille d'affichage de la fenêtre

• clientHeight La hauteur de la zone où le contenu peut être vu dans le navigateur

• Obtient la barre de défilement qui défile dans la fenêtre Distance :

  document.documentElement.scrollTop
  document.documentElement.scrollLeft;

• Idée d'implémentation; :
  Mettez l'image dans un calque et utilisez CSS Position initiale du calque de réglage du style

6. Créez des images publicitaires qui défilent avec la souris.

function move(){        
adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
} 
window.onload=inix;
window.onscroll=move;

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!