本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
添加方法:1、使用style对象;2、使用setAttribute;3、使用setProperty;4、通过改变伪元素父级的class来动态更改伪元素的样式;5、设置cssText;6、创建引入新的css样式文件;7、使用addRule和i
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
用JS来动态设置CSS样式,常见的有以下几种
1. 直接设置style的属性 某些情况用这个设置 !important值无效
如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px';
1 | element.style.height = '100px' ;
|
2. 直接设置属性(只能用于某些属性,相关样式会自动识别)
1 | element.setAttribute( 'height' , 100);
|
1 | element.setAttribute( 'height' , '100px' );
|
3. 设置style的属性
1 | element.setAttribute( 'style' , 'height: 100px !important' );
|
4. 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数
1 | element.style.setProperty( 'height' , '300px' , 'important' );
|
5. 改变class 比如JQ的更改class相关方法
因JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式
1 2 | element.className = 'blue' ;
element.className += 'blue fb' ;
|
6. 设置cssText
1 2 | element.style.cssText = 'height: 100px !important' ;
element.style.cssText += 'height: 100px !important' ;
|
7. 创建引入新的css样式文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function addNewStyle(newStyle) {
var styleElement = document.getElementById( 'styles_js' );
if (!styleElement) {
styleElement = document.createElement( 'style' );
styleElement.type = 'text/css' ;
styleElement.id = 'styles_js' ;
document.getElementsByTagName( 'head' )[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle( '.box {height: 100px !important;}' );
|
8. 使用addRule、insertRule
1 2 3 4 5 6 7 8 9 10 11 12 | document.styleSheets[0].addRule( '.box' , 'height: 100px' );
document.styleSheets[0].insertRule( '.box {height: 100px}' , 0);
var styleEl = document.createElement( 'style' ),
styleSheet = styleEl.sheet;
styleSheet.addRule( '.box' , 'height: 100px' );
styleSheet.insertRule( '.box {height: 100px}' , 0);
document.head.appendChild(styleEl);
|
【推荐学习:javascript高级教程】
以上就是JavaScript怎么给CSS加样式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript由什么解析
javascript怎么将值转换成数字类型
node.js“多线程”如何处理高并发任务?
iconfont图标引用的方法步骤(代码)
javascript如何删除指定数组元素
浏览器如何运行javascript
怎样使用javascript date format方法
详解javascript是如何运行的
javascript归属哪个公司
javascript $用法有哪些
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JavaScript怎么给CSS加样式