原生JS设置CSS样式有多少方式
文章导航
- element.style
- element.style.cssText
- 有什么区别
原生 JS
调整样式方式有 3
种。
element.style
- 属性需要使用驼峰形式
!important
权重无效
document.getElementById("box").backgroundColor = "red"// !important 无作用,下面两句是等效的
document.getElementById("box").style.color = "red !important"
document.getElementById("box").style.color = "red"
【注意】这里使用 !important
权重是无效的
element.style.cssText
cssText
即所有的样式文本
- 可以一次修改多个样式属性
- 注意直接赋值会替换原来的
cssText
- 可以添加
!important
// 原来的样式会丢失
document.getElementById("box").style.cssText = "color: red;font-size: 14px;"// 在原来样式的基础上添加新的样式
document.getElementById("box").style.cssText += "background-color: green;"
有什么区别
cssText
适合用于批量修改,使页面只进行一次页面重绘- 在使用
!important
权重的时候,只能使用cssText
,style
不能生效
element.setAttribute()
setAttribute()
方法可以设置元素的属性,当然也可以设置 style
属性。
document.getElementById("box").setAttribute("style","color:red;")// 配合 getAttribute(), 在原来样式基础上添加
document.getElementById("box").setAttribute("style", document.getElementById("box").getAttribute("style") + "color:red;")
原生JS设置CSS样式有多少方式相关推荐
- JS设置CSS样式的方式
用JS来动态设置CSS样式,常见的有以下8种方式 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有"-"号,就写成驼峰的形式(如text ...
- 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. 通过 ...
- JS设置CSS样式的几种方式(js设置!important)
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 ...
- JS设置CSS样式的几种方式
JS设置CSS样式的几种方式 1.直接设置style的属性 某些情况下用这个设置!import值无效 如果属性有"-"号,就需要使用驼峰命名法(如textAlign),如果想保留& ...
- JS设置CSS样式。
转自:微点阅读(www.weidianyuedu.com)微点阅读 - 范文大全 - 免费学习知识的网站 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个 ...
- JS设置CSS样式的方法。
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有"-"号,就写成驼峰的形式(如textAl ...
- html 中设置样式方式,在html元素中设置css样式的方式是什么
如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置"id" 和 "class"选择器. (推荐教程:CSS教程) 下面我们来分别说一下id选择 ...
- JS设置CSS样式的集中方式
1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element. ...
最新文章
- 【数据结构总结】第二章:线性表
- dom 生成图片和链接生成二维码
- 可做fft分析吗_小吃店生意好做吗,小吃业行情分析
- jsTree使用记录
- Intellij IDEA IDE 运行Sphinx-4 DEMO helloworld出现空...
- 面试官:如何设计出骚气的秒杀系统?
- 基于Freemarker模板引擎的Java代码生成器
- 经典网络结构 (五):ResNet (残差网络)
- 单片机入门学习十五 STM32单片机学习十二 电容触摸按键
- 程序员 开发人员 在线工具箱
- 人工智能专业世界排名第一的大学,2022最新
- 关于 pace 有意思的一篇文章
- 刨根笔记--由antd开始的jsx渲染学习路线
- 【米勒拉宾模板】Palindromic Primes
- 可爱又能干的小精灵—送餐机器人来啦
- React-滑条组件使用
- 有赞招聘 | 遇见offer之就要圆你的大厂梦
- 计算机方向键是哪个键,left键是哪个键
- 网络号,IP,子网掩码之间的关系
- RuntimeError: Attempting to deserialize object on CUDA device 1 but torch.cuda.device_count() is 1.
热门文章
- 2021人机交互的软件工程方法期末考试回忆
- db的中英文全称_数据库英文全称
- python五子棋_Python小项目之五子棋
- java计算机毕业设计菲特尼斯健身管理系统设计与实现源码+mysql数据库+系统+lw文档+部署
- 网课查题制作搜题公众号教程
- #DeepLearningBook#算法概览之十:Deep Generative Models
- 骨骼动画网格模型学习
- expdp 导出sys用户下的表报错ORA-39165 和ORA-39166
- 初学HTML详细全过程
- 用matlab生成高斯白噪声和均匀白噪声及其频谱