JS设置CSS样式的方式汇总


Posted in Javascript onJanuary 21, 2017

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');

!important的css定义是拥有最高的优先级。

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

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

5. 改变class   比如JQ的更改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 相关文章推荐
js日期对象兼容性的处理方法
Jan 28 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
js编写简易的计算器
Jul 29 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 #Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 #Javascript
js操作浏览器的参数方法
Jan 21 #Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 #Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 #Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 #Javascript
利用transition实现文字上下抖动的效果
Jan 21 #Javascript
You might like
为PHP初学者的8点有效建议
2010/11/20 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python根据文件大小打log日志
2014/10/09 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
简单实现python画圆功能
2018/01/25 Python
python高级特性简介
2020/08/13 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
办公室文员工作职责
2014/01/31 职场文书
工作失职自我检讨书
2015/05/05 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
员工手册董事长致辞
2015/07/29 职场文书
安全生产奖惩制度
2015/08/06 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏