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 相关文章推荐
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jsonp原理及使用
Oct 28 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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模板技术原理【一】
2008/01/10 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
php使用GeoIP库实例
2014/06/27 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
python实现的系统实用log类实例
2015/06/30 Python
python简单判断序列是否为空的方法
2015/06/30 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python实现图片中文字分割效果
2019/07/22 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
linux面试题参考答案(6)
2014/08/29 面试题
老公爱的承诺书
2014/03/31 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
Redis实现一个账号只能登录一个设备
2022/04/19 Redis