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