Wie js CSS steuert-Front-End-Fragen und Antworten-php.cn

Wie js CSS steuert

藏色散人

Freigeben： 2023-01-07 11:42:45

Original

6172 Leute haben es durchsucht

Methoden für js zur Steuerung von CSS: 1. Ändern Sie den Stil über das Style-Attribut oder „setAttribute()“ 2. Ändern Sie den „content“-Inhalt der Pseudoklasse „(after, before)“; durch Ändern des Klassennamens usw.

Wie js CSS steuert

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript 1.8.5 und CSS3-Version, DELL G3-Computer

Wie steuert JS CSS?

Mehrere Möglichkeiten für JS, CSS-Stile zu steuern

Bei unserer Arbeit und unserem Studium von JS stoßen wir immer auf Situationen, in denen es nicht einfach ist, CSS-Stile dynamisch über das Stilattribut zu laden (z. B. Pseudoklassen-Stilsteuerung). , Animationsstil-Steuerung), hier ist eine Zusammenfassung mehrerer Möglichkeiten, den Stil in js zu ändern:

1. Ändern Sie den Stil über das style-Attribut oder setAttribute()

ele.style.width=&#39;50px&#39;;//最常用
ele.style.cssText=&#39;width:50px&#39;;//并不会覆盖原先所有css
ele.style.setProperty("width", "50px", "important");//可以传第三个参数
ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用

Nach dem Login kopieren

ele.style.width=&#39;50px&#39;;//最常用
ele.style.cssText=&#39;width:50px&#39;;//并不会覆盖原先所有css
ele.style.setProperty("width", "50px", "important");//可以传第三个参数
ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用

Nach dem Login kopieren

2. Sie können dies auch tun, wenn Sie einfach das ändern Inhalt der Pseudoklasse (nachher, vorher)

//css代码
div::after{
    content:attr(data-myadd);
    width:10px;
}
//js代码
div.setAttribute(&#39;data-myadd&#39;,需要动态加载的内容)

Nach dem Login kopieren

//css代码
div::after{
    content:attr(data-myadd);
    width:10px;
}
//js代码
div.setAttribute(&#39;data-myadd&#39;,需要动态加载的内容)

Nach dem Login kopieren

3, ändern Sie den Stil, indem Sie den Klassennamen ändern

ele.className=&#39;&#39;;
ele.classList.add();//emmmm没什么好说的

Nach dem Login kopieren

ele.className=&#39;&#39;;
ele.classList.add();//emmmm没什么好说的

Nach dem Login kopieren

4, dann ist der entscheidende Punkt: Mit document.styleSheets erhalten wir alle Stylesheets und wählen dann eines aus Stylesheet zum Hinzufügen von Stilen über insertRule; Sie können auch neue cssRules erstellen, Stile über addRule()

document.styleSheets：获取到的是所有样式列表的集合
href：通过link标签引入的样式表，则是样式表的URL，否则为null
media：当前样式表支持的所有媒体类型集合
type：样式表类型的字符串
disabled： 通过disabled来屏蔽掉该样式表，可以用来切换样式表 ； document.styleSheets[i].disabled = true
cssRules：是当前样式列表的所有样式集合；document.styleSheets[i].cssRules
cssText：当前样式表的某一个样式的样式document.styleSheets[i].cssRules[i].cssText
selectorText：当前样式的选择符
parentStyleSheet：当前规则所属样式表；IE不支持
insertRule(rule,index)：在index前插入一条rule新规则； document.styleSheets[0].insertRule(&#39;* {background:blue;color:#000}&#39;,0)不支持IE；document.styleSheets[0].addRule(&#39;*&#39;,&#39; {background:blue;color:#000}&#39;,0)支持IE；
deleteRule(index)：删除某个央视列表的第index个样式；IE用removeRule(index)
//使用document.styleSheets获取样式表的时候最好获取最后一个，在最后一个样式表上添加样式
var sheets=document.styleSheets;
var lastSheet=sheets[sheets.length-1];
lastSheet.insertRule(&#39;#div{width:10px}&#39;,index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器
lastSheet.addRule(&#39;div&#39;,&#39;width:10px;&#39;,0)//IE浏览器

Nach dem Login kopieren

//使用document.styleSheets获取样式表的时候最好获取最后一个，在最后一个样式表上添加样式
var sheets=document.styleSheets;
var lastSheet=sheets[sheets.length-1];
lastSheet.insertRule(&#39;#div{width:10px}&#39;,index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器
lastSheet.addRule(&#39;div&#39;,&#39;width:10px;&#39;,0)//IE浏览器

Nach dem Login kopieren

5 hinzufügen und Stylesheets dynamisch laden

Wenn viele Stile geändert werden müssen, wird empfohlen, die Seite zu ändern Stil durch dynamisches Laden von Stilen

//改变样式文件的引用
function loadStyle(url){
　　var link = document.createElement(&#39;link&#39;);
    link.type = &#39;text/css&#39;;
    link.rel = &#39;stylesheet&#39;;
    link.href = url;
    var head = document.getElementsByTagName(&#39;head&#39;)[0];
    head.appendChild(link);
}
loadStyle(&#39;test.css&#39;);
//动态加载css代码片段
var style = document.createElement(&#39;style&#39;);
    style.type = &#39;text/css&#39;;
    style.rel = &#39;stylesheet&#39;;
    try{ //Chrome Firefox Opera Safari
        style .appendChild(document.createTextNode(code));
    }catch(ex){//IE
        style.styleSheet.cssText = code;
    }
    var head = document.getElementsByTagName(&#39;head&#39;)[0];
    head.appendChild(style);
}
loadCssCode(&#39;body{background-color:#f00}&#39;);

Nach dem Login kopieren

//改变样式文件的引用
function loadStyle(url){
　　var link = document.createElement(&#39;link&#39;);
    link.type = &#39;text/css&#39;;
    link.rel = &#39;stylesheet&#39;;
    link.href = url;
    var head = document.getElementsByTagName(&#39;head&#39;)[0];
    head.appendChild(link);
}
loadStyle(&#39;test.css&#39;);
 
//动态加载css代码片段
var style = document.createElement(&#39;style&#39;);
    style.type = &#39;text/css&#39;;
    style.rel = &#39;stylesheet&#39;;
    try{ //Chrome Firefox Opera Safari
        style .appendChild(document.createTextNode(code));
    }catch(ex){//IE
        style.styleSheet.cssText = code;
    }
    var head = document.getElementsByTagName(&#39;head&#39;)[0];
    head.appendChild(style);
}
loadCssCode(&#39;body{background-color:#f00}&#39;);

Nach dem Login kopieren

Empfohlenes Lernen: „Javascript-Tutorial für Fortgeschrittene 》

Das obige ist der detaillierte Inhalt vonWie js CSS steuert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!