本文摘自PHP中文网,作者藏色散人,侵删。
js控制css的方法:1、通过style属性或者“setAttribute()”来更改样式;2、改变伪类“(after,before)”的“content”内容;3、通过更改类名来更改样式等等。
本文操作环境:windows7系统、javascript1.8.5&&CSS3版,DELL G3电脑
js如何控制css?
JS控制css样式的几种方式
我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(eg:伪类的样式控制,动画的样式控制),这里总结一下js改变样式的几种方法:
1,通过style属性或者setAttribute()来更改样式
1 2 3 4 | ele.style.width= '50px' ;
ele.style.cssText= 'width:50px' ;
ele.style.setProperty( "width" , "50px" , "important" );
ele.setAttribute( "style" , "width: 50px" )
|
1 2 3 4 | ele.style.width= '50px' ;
ele.style.cssText= 'width:50px' ;
ele.style.setProperty( "width" , "50px" , "important" );
ele.setAttribute( "style" , "width: 50px" )
|
2,如果只是改变伪类(after,before)的content内容也可以这么做
1 2 3 4 5 6 7 | div::after{
content:attr(data-myadd);
width:10px;
}
div.setAttribute( 'data-myadd' ,需要动态加载的内容)
|
1 2 3 4 5 6 7 | div::after{
content:attr(data-myadd);
width:10px;
}
div.setAttribute( 'data-myadd' ,需要动态加载的内容)
|
3,通过更改类名来更改样式
1 2 | ele.className= '' ;
ele.classList.add();
|
1 2 | ele.className= '' ;
ele.classList.add();
|
4,那么重点来了:利用document.styleSheets我们获取到所有样式表,然后选择一个样式表通过 insertRule 来添加样式;也可以创建新的cssRules,通过addRule()来添加样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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)
var sheets=document.styleSheets;
var lastSheet=sheets[sheets.length-1];
lastSheet.insertRule( '#div{width:10px}' ,index)
lastSheet.addRule( 'div' , 'width:10px;' ,0)
|
1 2 3 4 5 | var sheets=document.styleSheets;
var lastSheet=sheets[sheets.length-1];
lastSheet.insertRule( '#div{width:10px}' ,index)
lastSheet.addRule( 'div' , 'width:10px;' ,0)
|
5,动态加载样式表
如果需要更改的样式比较多,还是建议通过动态加载样式的方式来改变页面样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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' );
var style = document.createElement( 'style' );
style.type = 'text/css' ;
style.rel = 'stylesheet' ;
try {
style .appendChild(document.createTextNode(code));
} catch (ex){
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName( 'head' )[0];
head.appendChild(style);
}
loadCssCode( 'body{background-color:#f00}' );
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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' );
var style = document.createElement( 'style' );
style.type = 'text/css' ;
style.rel = 'stylesheet' ;
try {
style .appendChild(document.createTextNode(code));
} catch (ex){
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName( 'head' )[0];
head.appendChild(style);
}
loadCssCode( 'body{background-color:#f00}' );
|
推荐学习:《javascript高级教程》
以上就是js如何控制css的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html中是如何引入css样式?以及link与@import的区别(代码实例)
css浮动是什么
css不让字体倾斜怎么实现
html如何用css美化表格
border属性怎么用
css怎么改变div的位置
css3+javascript怎么做一个旋转的3d盒子?
css字体溢出怎么隐藏
css text-outline属性怎么用
必看,系统介绍前端 html与css的基础 知识点
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何控制css