用JS动态设置CSS样式常见方法小结(推荐)


Posted in Javascript onNovember 10, 2016

用JS来动态设置CSS样式,常见的有以下几种

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

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

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

5. 改变class 比如JQ的更改class相关方法

因JS获取不到css的伪元素,所以可以通过改变伪元素父级的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 相关文章推荐
用JavaScript修改CSS属性的代码
May 06 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
js中数组的常用方法小结
Dec 30 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
jquery日历插件e-calendar升级版
Nov 10 #Javascript
Vue.js开发环境搭建
Nov 10 #Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 #Javascript
javascript中的后退和刷新实现方法
Nov 10 #Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 #Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
easyui的tabs update正确用法分享
2014/03/21 PHP
初识PHP中的Swoole
2016/04/05 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python读写文件基础知识点
2019/06/10 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
什么是岗位职责
2013/11/12 职场文书
学生自我鉴定
2013/12/18 职场文书
高中生自我评语大全
2014/01/19 职场文书
奠基仪式策划方案
2014/05/15 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
项目建议书
2015/02/04 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Python matplotlib绘制雷达图
2022/04/13 Python