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事件实现代码
Mar 12 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
js中的闭包实例展示
Nov 01 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
微信小程序合法域名配置方法
May 06 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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面向对象 字段的声明与使用
2012/06/14 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
简洁的十分钟Python入门教程
2015/04/03 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python 的类、继承和多态详解
2017/07/16 Python
python编程羊车门问题代码示例
2017/10/25 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
美国网上订购鲜花:FTD
2016/09/23 全球购物
店长岗位职责
2013/11/21 职场文书
会计求职信范文
2014/05/24 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
导游词之无锡古运河
2019/11/14 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL