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获取数组最大和最小值示例代码
Oct 29 Javascript
Javascript事件实例详解
Nov 06 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python链表类中获取元素实例方法
2021/02/23 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
小学五年级学生评语
2014/04/22 职场文书
人大代表选举标语
2014/10/07 职场文书
博士生专家推荐信
2015/03/25 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Oracle创建只读账号的详细步骤
2021/06/07 Oracle