用JS动态设置CSS样式常见方法小结(推荐)


Posted in Javascript onNovember 10, 2016

用JS来动态设置CSS样式,常见的有以下几种

1. 直接设置style的属性 某些情况用这个设置 !important值无效

如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px';

element.style.height = '100px';

2. 直接设置属性(只能用于某些属性,相关样式会自动识别)

element.setAttribute('height', 100);
element.setAttribute('height', '100px');

3. 设置style的属性

element.setAttribute('style', 'height: 100px !important');

4. 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5. 改变class 比如JQ的更改class相关方法

因JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式

element.className = 'blue';
element.className += 'blue fb';

6. 设置cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

7. 创建引入新的css样式文件

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

// 在原有样式操作
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);

以上所述是小编给大家介绍的用JS动态设置CSS样式常见方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
jquery日历插件e-calendar升级版
Nov 10 #Javascript
Vue.js开发环境搭建
Nov 10 #Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 #Javascript
javascript中的后退和刷新实现方法
Nov 10 #Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 #Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 #Javascript
You might like
调频问题解答
2021/03/01 无线电
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python time库基本使用方法分析
2019/12/13 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
总裁岗位职责
2013/12/04 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL