js가 CSS를 제어하는 ​​방법

js가 CSS를 제어하는 ​​방법: 1. 스타일 속성 또는 "setAttribute()"를 통해 스타일을 변경합니다. 2. 의사 클래스 "(이후, 이전)"의 "콘텐츠" 콘텐츠를 변경합니다. 클래스 이름 등을 변경하여

이 기사의 운영 환경: windows7 시스템, javascript1.8.5&&CSS3 버전, DELL G3 컴퓨터

js는 CSS를 어떻게 제어하나요?

JS가 CSS 스타일을 제어하는 ​​여러 가지 방법

JS 작업과 연구에서 스타일 속성을 통해 CSS 스타일을 동적으로 로드하는 것이 쉽지 않은 상황에 항상 직면합니다(예: 의사 클래스 스타일 제어). , 애니메이션 스타일 컨트롤), 다음은 js에서 스타일을 변경하는 여러 가지 방법에 대한 요약입니다.

1. 스타일 속성 또는 setAttribute()를 통해 스타일을 변경합니다.

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

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

2. 가상 클래스의 내용(이후, 이전)

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

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

3, 클래스 이름

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

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

4을 변경하여 스타일을 변경합니다. 핵심은 다음과 같습니다. document.styleSheets를 사용하여 모든 스타일 시트를 얻은 다음 insertRule을 통해 스타일을 추가하는 스타일 시트; 새로운 cssRules를 생성하고, 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('* {background:blue;color:#000}',0)不支持IE；document.styleSheets[0].addRule('*',' {background:blue;color:#000}',0)支持IE；
deleteRule(index)：删除某个央视列表的第index个样式；IE用removeRule(index)
//使用document.styleSheets获取样式表的时候最好获取最后一个，在最后一个样式表上添加样式
var sheets=document.styleSheets;
var lastSheet=sheets[sheets.length-1];
lastSheet.insertRule('#div{width:10px}',index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器
lastSheet.addRule('div','width:10px;',0)//IE浏览器

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

5을 통해 스타일을 추가하고, 스타일 시트를 동적으로 로드할 수 있습니다

변경해야 할 스타일이 많으면 페이지를 변경하는 것이 좋습니다. 스타일을 동적으로 로드하여 스타일

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

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

추천 학습: "javascript 고급 튜토리얼 》

위 내용은 js가 CSS를 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!