通过DOM来说去元素的内联样式

最新推荐文章于 2024-05-22 14:36:42 发布
最新推荐文章于 2024-05-22 14:36:42 发布
阅读量280 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45268202/article/details/122150010
版权

通过js修改元素的样式：
语法：元素.style.样式名 = 样式值

                注意：如果CSS样式中含有减号“-”
                    这种名称在JS中是不合法的比如background-color
                    需要将这种样式名修改为驼峰命名法
                    去掉减号，然后将-后的字母大写

                我们通过style属性设置的样式都是内联样式
                而内联样式有较高的优先级，所以通过JS来修改样式会立即生效

                但是如果在样式中邪了!important，则此时样式会有最高的优先级
                即使通过JS也不能覆盖样式，此时将会导致JS修改样式失效
                所以尽量不要写!important

                通过style属性设置和读取的都是内联样式
                无法读取样式表中的样式
想要成为码农
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
通过DOM对象获取/修改CSS样式 & class
qq2071114140的博客
08-18 7829
文章目录通过DOM对象获取/修改CSS样式1.获取 & 修改内联样式2. 获取当前样式IE8及以下不支持，其它支持：`window.getComputedStyle(element)`仅IE浏览器支持：`element.currentStyle.XXX`封装一个通用的方法总结 通过DOM对象获取/修改CSS样式 1.获取 & 修改内联样式 对于一个元素结点来说，内联样式style就是元素结点的一个属性节点。 可以通过element.style.XXX来获取这个元素结点的内联样式；同时，也可以
css 块状元素和内联元素
12-12
注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼前的文字和代码吓到哟~ 块状元素 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度...
JavaScript知识——DOM增删改、操作内联样式
xiaotangyu7dong的博客
08-16 655
JavaScript知识DOM增删改操作内联样式获取元素的样式例子 DOM增删改 <div> <ul id="city"> <li id="bj">北京</li> </ul> </div> <div class="btn"> <button id="btn1">创建一个“广州”节点，添加到#city下</button
DOM与元素节点内联样式
weixin_33889665的博客
09-26 143
获取、设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性，可以用来插入针对该元素的内联 CSS 属性。 &lt;div style='background-color:black; height:100px; width:100px'&gt;&lt;/div&gt; &lt;script&gt; var divStyle = document.querySelec...
【JavaScript】使用DOM修改和查询CSS内联样式
苏凉.py的博客
07-07 830
在上几期都是说通过DOM来操作元素。现在我们具体说一下怎样操作CSS样式，无非就是修改样式和查找样式。html： css： javascript：注意：css样式名中有号，在js中是不合规范的，比如这里的,在js中需要用驼峰命名法表示，即来表示。修改其他属性也是如此。 我们通过这种方式实际上是对内联样式进行修改，而内联样式的优先级是大于样式表的样式的，因此，此方法会直接覆盖掉样式表的样式。javascript： 直接获取样式值。缺点：这种方法只能获取到css的内联样式，获取不到样式表中的样式。 如图： 此方
DOM获取元素的样式
Paranoid_truggle的博客
07-30 448
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box1{ width: 200px; height: 200px; background-color: red; } </style> <sc
通过原生DOM来操作样式
一碗周
12-09 932
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第四十三篇-《样式操作》 概述 到目前为止，我们已经学习的DOM中的三个核心对象，Document、Node、Element，但是我们发现，这说那个核心对象都是操作HTML标签的，页面中的主要有两个静态内容，一个是标签结构是静态的，另个一个是CSS样式是静态的；也就是说DOM中既可以操作HTML标签 也可以操作CSS样式。接下来我们就来看一下DOM是怎么对CSS样式进行操作的。 .
js判断元素css样式,简述关于通过js判断dom元素去改变该元素的css属性
weixin_39976951的博客
08-03 853
简述：很多场景中，都需要我们需要去通过js去判断DOM元素，按照自己实际的需要去改变DOM的css属性。例如，弹窗的显示和隐藏、背景图片的更换、导航icon的高亮等等.....今天就来简单讨论关于 「关于通过js去判断dom元素去改变该元素的css属性来」简单操作过程：1.关于style内联css;给出一个实际的demo，「一个元素的显示和消失」一般来说，我们都是通过js去获取dom的元素，进而去...
html 内联元素和html 块级元素概述及区别
09-28
块级元素(block)特性:总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈
块级元素和内联元素及可变元素汇总
09-28
块元素又名块级元素，和其对应的是内联元素，都是html规范中的概念，内联元素其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等
如何去掉内联样式 通过style属性定义的(element.style)
09-22
element.style定义样式的优先级别超过style.css引用文件的样式，怎样能使级别超越element.style呢？在css属性值后面加上！important即可实现
CSS学习笔记之高级教程（一）
最新发布
wz_1992的博客
05-22 875
1、圆角：border-radius border-radius 属性可以接受一到四个值。规则如下： 四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角） 三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角） 两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）
css卡片横线100%宽度
m0_46554818的博客
05-22 253
【代码】css卡片横线100%宽度。
【CSS】媒体（媒介 / media）查询
小秀的博客
05-22 408
媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于根据设备的特性和属性，为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。表示媒体类型，比如screen（屏幕）、print（打印）等，而是媒体特性，比如width（宽度）、height（高度）、（方向）等。未指明类型为默认值 all。
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 471
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
CSS中的Flex布局
zheshiyangyang的博客
05-21 803
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
vue+css解决图片变形问题（flex-shrink: 0）
leng0920的博客
05-22 180
vue+css解决图片变形问题（flex-shrink: 0）
块元素和内联元素区别
03-10
块元素和内联元素是HTML中常用的两种元素类型，它们在布局和显示上有一些区别。 1. 块元素： - 块元素以新行开始，占据整个可用的宽度，默认情况下会自动换行。 - 块元素可以设置宽度、高度、内外边距等属性。 -...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想要成为码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值