Fügen Sie Stile mithilfe von javascript_javascript-Tipps ein

1. Verwenden Sie Javascript, um den Stil einzufügen Manchmal müssen wir js verwenden, um den CSS-Code im Style-Tag auf der Seite dynamisch zu generieren. Die Methode ist sehr einfach: Erstellen Sie direkt ein Style-Element, legen Sie dann den CSS-Code im Style-Element fest und fügen Sie ihn schließlich ein das Kopfelement. Aber es gibt einige Kompatibilitätsprobleme, die wir lösen müssen. Zunächst müssen wir in Browsern, die den W3C-Standards entsprechen, nur den CSS-Code einfügen, der als Textknoten in das Stilelement eingefügt werden soll. Im IE müssen wir den styleSheet.cssText des Stilelements verwenden, um das Problem zu lösen Problem.

Es ist auch zu beachten, dass in einigen IE-Versionen die Anzahl der Style-Tags auf einer Seite begrenzt ist. Bei Überschreitung wird ein Fehler gemeldet.

function addCSS(cssText){ var style = document.createElement('style'), //创建一个style元素 head = document.head || document.getElementsByTagName('head')[0]; //获取head元素 style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用 if(style.styleSheet){ //IE var func = function(){ try{ //防止IE中stylesheet数量超过限制而发生错误 style.styleSheet.cssText = cssText; }catch(e){

} } //如果当前styleSheet还不能用，则放到异步中则行 if(style.styleSheet.disabled){ setTimeout(func,10); }else{ func(); } }else{ //w3c //w3c浏览器中只要创建文本节点插入到style元素中就行了 var textNode = document.createTextNode(cssText); style.appendChild(textNode); } head.appendChild(style); //把创建的style元素插入到head中 }

//使用 addCSS('#demo{ height: 30px; background:#f00;}'); Nach dem Login kopieren Natürlich ist dies nur die grundlegendste Demonstrationsmethode und muss in der tatsächlichen Anwendung verbessert werden. Fügen Sie beispielsweise den jedes Mal generierten CSS-Code in ein Stilelement ein, damit die Anzahl der Stylesheets nicht überschritten wird Grenze im IE Falsch.

Paket:

Code kopieren Der Code lautet wie folgt: var importStyle=function importStyle(b){var a= document.createElement ("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild (c. createTextNode(b))}}; importStyle('h1 { background: red; }');//Call Seajs-Paket

Code kopieren Der Code lautet wie folgt: seajs.importStyle=function importStyle(b){var a =document. createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a. appendChild(c .createTextNode(b))}}; 2. JavaScript-Einfügung Verwenden Sie das -Tag, um eine externe Stildatei einzuführen. Dies ist relativ einfach und es gibt keine Kompatibilitätsprobleme mit den wichtigsten Browsern: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Fügen Sie Stile mithilfe von javascript_javascript-Tipps ein