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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
js读取本地文件的实例
Dec 22 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
JavaScript实现筛选数组
Mar 02 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python实现用户答题功能
2018/01/17 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python中的&&及||的实现示例
2019/08/07 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
如何强制垃圾回收
2015/10/06 面试题
什么是反射?如何实现反射?
2016/07/25 面试题
校运会广播稿100字
2014/01/27 职场文书
班主任寄语大全
2014/04/04 职场文书