Js setzt und ruft Elementstilmethoden ab

1. Verwenden Sie die Ereignisse onmouseover und onmouseout, um die Änderung des Textstils festzulegen, wenn die Maus hinein- und herausbewegt wird.

2. Zwei Möglichkeiten, externe Stylesheets zu verwenden.

• 1. Verwenden Sie Tags, um eine Verbindung zu externen Dateien herzustellen.

• 2. Verwenden Sie die @import-Methode, um externe Stylesheets zu importieren.

  Der Unterschied zwischen Vorfahren. Link gehört zum XHTML-Tag und @import ist vollständig eine von CSS bereitgestellte Methode. Zusätzlich zum Laden von CSS kann das Link-Tag auch viele andere Dinge tun, z. B. RSS definieren, rel-Verbindungsattribute definieren usw. @import kann nur CSS laden.
  Unterschied in der Ladereihenfolge. Wenn eine Seite geladen wird (d. h. wenn sie von einem Betrachter angezeigt wird), wird gleichzeitig das durch den Link referenzierte CSS geladen, während das durch @import referenzierte CSS wartet, bis die Seite vollständig heruntergeladen ist, bevor es geladen wird. Wenn Sie also eine Seite durchsuchen, auf der @import CSS lädt, ist zunächst kein Stil vorhanden, und dann wird plötzlich der Stil angezeigt, was bei langsamer Netzwerkgeschwindigkeit ziemlich offensichtlich ist.

  Kompatibilitätsunterschiede. Da @import in CSS2.1 eingeführt wurde, wird @import von älteren Browsern nur von IE5 oder höher erkannt, beim Link-Tag tritt dieses Problem jedoch nicht auf.
  Der Unterschied bei der Verwendung von DOM zur Steuerung von Stilen.
  Wenn Sie JavaScript verwenden, um den Dom zu steuern und den Stil zu ändern, können Sie nur das Link-Tag verwenden, da @import nicht vom Dom gesteuert werden kann.
  Daher wird empfohlen, einen Link zu verwenden, um Stile ohne besondere Umstände einzuführen, und die Verwendung von @import zu vermeiden.

• Der Unterschied zwischen den beiden:
  Im Wesentlichen Diese beiden Methoden dienen beide zum Laden von CSS-Dateien, es gibt jedoch dennoch geringfügige Unterschiede.

3. Ändern Sie den Stil von Seitenelementen dynamisch.

• 1. Verwenden Sie die Methodenreihe getElement, um auf Elemente zuzugreifen.

• 2. Stilattribute ändern:

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

4. Verwenden Sie Funktionen, um Menüeffekte zu ändern

• Legen Sie den Anfangszustand jedes Li-Tags fest

• Legen Sie zwei Stile darüber und außen fest, um den Effekt anzuzeigen, der beim Bewegen der Maus zum und aus dem Menü entsteht

  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";
          }       
  }

5. Anwendung des JavaScript-Zugriffsstils.

• Methoden zum Abrufen von Stilen:

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

• Methoden zum Abrufen interner (eingebetteter) und externer Stile:

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

• Ermitteln Sie den Bildlaufabstand der Bildlaufleiste:

  Ermitteln Sie beim Laden der Seite die spezifische Position der Ebene, auf der sich das Bild befindet, d. h. die linke und obere Position der Seite

  Startseite abrufen Bei der Positionierung muss der Typ des aktuellen Browsers ermittelt werden

  Wenn die Bildlaufleiste scrollt, ermitteln Sie den Abstand zwischen der Bildlaufleiste und dem oberen Rand linken Seite der Seite (um den Typ des aktuellen Browsers zu bestimmen) und ändern Sie gleichzeitig den Ebenenabstand von der oberen und linken Seitenposition.

  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";
  }

• scrollTop Legt den Abstand zwischen der Oberkante des Objekts und der Oberkante des sichtbaren Inhalts im Fenster fest oder ruft ihn ab

• scrollLeft Legt den Abstand zwischen dem linken Rand des Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder ruft ihn ab.

• clientWidth Die Breite des sichtbaren Inhalts im Browser. Mit Ausnahme von Bildlaufleisten und anderen Kanten ändert sich die Anzeigegröße des Fensters

• clientHeight Die Höhe des Bereichs, in dem der Inhalt im Browser angezeigt wird

• Ruft die Bildlaufleiste im Fenster ab. Abstand:

  document.documentElement.scrollTop;
  document.documentElement.scrollLeft;

• Implementierungsidee :
  Fügen Sie das Bild in eine Ebene ein und verwenden Sie CSS. Anfangsposition der Stileinstellungsebene

6. Erstellen Sie Werbebilder, die mit der Maus scrollen.

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;

Das obige ist der detaillierte Inhalt vonJs setzt und ruft Elementstilmethoden ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!