用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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
javascript的console.log()用法小结
May 31 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
详解ES7 Decorator 入门解析
Feb 18 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python基础教程之字典操作详解
2014/03/25 Python
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
python绘制双柱形图代码实例
2017/12/14 Python
python中的变量如何开辟内存
2018/06/26 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
预备党员政审材料
2014/02/04 职场文书
运动会入场口号
2014/06/07 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
医学会议开幕词
2016/03/03 职场文书