JS设置CSS样式的几种方式
JS设置CSS样式的几种方式
1、直接设置style的属性 某些情况下用这个设置!import值无效
如果属性有"-"号,就需要使用驼峰命名法(如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(使用js增加或删除某个属性,如class属性,通过这种方法来改变样式)
element.className = 'blue';
element.className += 'blue fb';
6、设置cssText
element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';
7、使用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样式的几种方式相关推荐
- JS设置CSS样式的几种方式(js设置!important)
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 ...
- html js 设置样式,原生js设置样式 笔记:JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性 用J ...
- 原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式 发布时间:2020-08-30 01:46:17 来源:脚本之家 阅读:148 作者:外婆的彭湖湾 下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
- 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
- 用JS来动态设置CSS样式的八种方式
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无 ...
- JS修改css样式的8种方式
从其他人的博客上看到的,感觉归纳的很棒,在这里种个草. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- 原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
- 创建CSS样式的三种方式
CSS基础 - 创建CSS样式的三种方式 我们使用CSS的时候,常规有三种创建CSS样式的的方式: 内联样式,内部样式表,外部样式表 1.内联样式 (不常用) style在标签中的情况就是内联样式.不 ...
- 网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
最新文章
- Google Test(GTest)使用方法和源码解析——Listener技术分析和应用
- 从空军机长到大厂程序员,关系数据库之父传奇
- SpringMVC响应的方式,无数据跳转页面,带数据跳转页面.Json数据返回
- 最短路算法模板--SPFA
- 无限乱斗机器人ap出装_另类出装畅玩无限乱斗!AP小丑成致胜黑科技
- 大智慧 软件 开发语言_智慧工厂培训软件开发流程篇
- 概率论与数理统计图解
- BS4爬取物价局房产备案价以及dataframe的操作来获取房价的信息分析
- 18.1.7 这样真的有点敷衍 37-39
- pgsql timestamp without time zone > character varying解决方案
- 网站后缀名html,网页后缀名有哪些
- 双离合档把上按钮作用_双离合怎么换挡图解,7速双离合档位示意图
- 梧桐新叶让我怀念父亲
- java pg数据库事务回滚_PostgreSQL事务特性之ROLLBACK
- android 小米角标,关于 小米手机 角标的问题
- 在线生成图片大全——绝对经典
- css3对页面打印设置的一些特殊属性,如@page,target-counter等
- 自编写RPC通信实例解析HadoopRPC通信原理
- android女孩名字的由来,诗经中的女孩灵动名字 寓意深刻而又唯美
- 电子表格计算机课时费,如何用EXCEL设置教师课时费报表
热门文章
- 计算机物理学论文300字,物理考试总结300字
- python爬取头条好货广告_python 爬取今日头条关键词搜索
- 大数据在电力行业的应用案例100讲(十)-电力大数据分析模型
- Hbuilderx使用vue项目和vsn
- uploadify插件无法在谷歌浏览器使用
- 美格信-骨传导单体振子测试
- 创建maven web项目出错Project build error: Non-parseable POM D:\Ieven\workspace\ws1802\jt-web\pom.xm
- 3D模型欣赏:贱萌系忍者猫CG角色
- ffmpeg rtp转rtmp
- 从0开始搞一个锦鲤游动——画锦鲤