JS设置CSS样式的方式汇总
更新时间：2017年01月21日 09:41:25 作者：LiuWeiLong
这篇文章给大家总结了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');
!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中mouseover、mouseout使用详解
这篇文章主要介绍了javascript中mouseover、mouseout使用详解的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了HTML5实现拖拉上传文件功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
如果你希望求某一特定路径（例如从根到叶子）上数字的和,那么问题就转变为了“求二叉树从根到叶的所有路径和”,所以本文给大家介绍了如何使用JavaScript求二叉树从根到叶的所有路径和,需要的朋友可以参考下2023-10-10
本篇文章主要介绍Javascript+CSS3实现进度条效果，可以实现给用户一个等待的过程，有需要的可以了解一下。2016-10-10
这篇文章主要介绍了Javascript图片预加载，帮助大家理解Javascript图片预加载的实现原理，感兴趣的小伙伴们可以参考一下2016-02-02
Echo 是一个独立的 JavaScript 懒加载图像的工具，快速、体积小（不足1k）和使用 HTML5 的 data- 属性，通过本文给大家介绍JavaScript图像延迟加载库Echo.js ，感兴趣的朋友一起学习吧2016-04-04
这篇文章主要介绍了JS实现自动变换的菜单效果代码,可实现自动变换菜单选中项的技巧,涉及JavaScript定时函数触发页面样式属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要给大家介绍了关于小程序自定义tab-bar踩坑实战的相关资料,包括下载代码、放置文件、修改JS文件、配置app.json和隐藏原生导航栏等步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-12-12
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
这篇文章主要介绍了webpack4与babel配合使es6代码可运行于低版本浏览器的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了在微信小程序中使用vant的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
最新评论