使用DOM操作css

通过JS修改元素的样式

语法：元素.style.样式名 = 样式值
注意：如果css的样式名中含有 - ，这种名称在JS中是不合法的比如 background-color 需要将这种样式名修改为驼峰命名法，去掉-，然后将- 后面的字母大写
我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important,则此时样式会有最高的优先级即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效 所以尽量不要为样式添加!important

            box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";

读取元素的样式

alert(box1.style.width);

获取元素的当前显示的样式

语法：元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
如果当前元素没有设置该样式，则获取它的默认值
currentStyle只有IE浏览器支持，其他的浏览器都不支持

在其他浏览器中可以使用

getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数第一个：要获取样式的元素第二个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象.样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如：没有设置width,它不会获取到auto,而是一个长度
但是该方法不支持IE8及以下的浏览器
通过currentStyle和getcomputedStyle()读取到的样式都是只读的，不能修改，如果修改必须通过style属性

var obj = getComputedStyle(box1,null);alert(obj.width);alert(obj.backgroundColor);

使用DOM操作内联样式相关推荐

JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
第 10 节操作内联样式
第10节操作内联样式操作内联样式操作内联样式 1.通过JS修改元素的样式: 1)语法:元素.style.样式名 = 样式值注意: 如果CSS的样式名中含有 -,这种名称在JS中是不合法的,比如 ...
js学习笔记82——操作内联样式
js学习笔记82--操作内联样式通过js修改元素的样式查参考手册内联样式读取元素的样式看如下代码 <!DOCTYPE html> <html lang="en&q ...
DOM与元素节点内联样式
获取.设置及移除单个内联 CSS 属性每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...
为啥不建议写内联样式？
最近有个小问题,就是在写页面的时候要尽量避免用内联样式,那么为啥?可能是从开始学习的时候就避免写内联,觉得不美观,js也不便操作. 然后,想了想会不会是因为css会阻塞dom树的渲染呢? 查完以后,发 ...
html清除内联样式,是否可以使用jQuery删除内联样式？
更新:虽然以下解决方案有效,但有一种更简单的方法.见下文. 这就是我想出来的,我希望这对你或其他任何人都有用:$('#element').attr('style', function(i, style ...
css vue 内联_vue 内联样式style中的background
在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定 ...
你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录一.CSS 层叠样式表二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果一.CSS 层叠样式表 ...

使用DOM操作内联样式

使用DOM操作css

获取元素的当前显示的样式

使用DOM操作内联样式相关推荐

最新文章

热门文章