【JavaScript】使用DOM修改和查询CSS内联样式

在上几期都是说通过DOM来操作元素。现在我们具体说一下怎样操作CSS样式，无非就是修改样式和查找样式。

修改样式

语法：元素名.style.样式名 = "样式值"

html：

<div id="box1"><button id="bt1">点我改变样式</button><button id="bt2">点击查看样式</button>
</div>

css：

#box1{width: 100px;height: 100px;background-color: aquamarine;}

javascript：

注意：css样式名中有-号，在js中是不合规范的，比如这里的background-color,在js中需要用驼峰命名法表示，即backgroundColor来表示。修改其他属性也是如此。

window.onload = function(){//获取box1var box1 = document.getElementById('box1');//获取bt1var bt1 = document.getElementById('bt1');//添加单击响应函数bt1.onclick = function(){//修改宽度box1.style.width = '300px';box1.style.height = '300px';box1.style.backgroundColor = 'lightblue';}
}

我们通过这种方式实际上是对内联样式进行修改，而内联样式的优先级是大于样式表的样式的，因此，此方法会直接覆盖掉样式表的样式。

查找样式值

第一种方法：

语法：元素名.style.样式名

javascript：

window.onload = function(){//获取box1var box1 = document.getElementById('box1');//获取bt2var bt2 = document.getElementById('bt2');//添加单击响应函数bt2.onclick = function(){//查看内联样式alert(box1.style.width);alert(box1.style.height);alert(box1.style.backgroundColor);}
}

直接获取样式值。缺点：这种方法只能获取到css的内联样式，获取不到样式表中的样式。
如图：

第二种方法

语法：getComputedStyle(要获取样式的元素,伪元素（一般都传入null值）)

此方法返回的是一个对象，要获取样式值则需要通过这个方法去调用属性

window.onload = function(){//获取box1var box1 = document.getElementById('box1');//获取bt2var bt2 = document.getElementById('bt2');//添加单击响应函数bt2.onclick = function(){//查看当前样式var obj = getComputedStyle(box1,null);alert(obj.width);alert(obj.height);alert(obj.backgroundColor);}
}

此方法可以获取到你当前生效的css样式值，无论是内联样式亦或者是css样式表内的样式。颜色返回的是rgb格式。

更多DOM元素方法前看此文档：

HTML DOM Element 对象

【JavaScript】使用DOM修改和查询CSS内联样式相关推荐

css内联样式_如何覆盖内联CSS样式
css内联样式本文写于2009年,至今仍是我们最受欢迎的帖子之一. 如果您想了解有关CSS的更多信息,您可能会发现这篇有关CSS技术的文章对视网膜显示非常感兴趣. CSS的最强大功能之一就是层叠. ...
CSS内联样式的使用，吐血整理
前言本文主要是javascript和css方面的基础面试题,适合面试前以及平时复习食用. 基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack.git.node ...
什么？CSS内联样式的使用
CSS 篇 link 与 @import 的区别 link 是 HTML 方式, @import 是CSS方式 link 最大限度支持并行下载, @import 过多嵌套导致串行下载,出现 FOUC ...
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录一.CSS 层叠样式表二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果一.CSS 层叠样式表 ...
css vue 内联_vue 内联样式style中的background
在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定 ...
HTML基础内联样式改进三毛语录
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
如何用js获取外联css,内联外联CSS和JS
内联CSS 代码示例: 这里文字是红色. 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度 ...
react里面内联css样式怎么样_React.js内联样式最佳做法
小编典典目前还没有很多"最佳实践".我们中那些使用内联样式作为React组件的人仍在进行大量试验. 全部还是全部? 我们所称的"样式"实际上包括许多概念: 布 ...
react内联样式_React样式化的组件：内联样式+ 3种其他CSS样式化方法（带有示例）...
react内联样式 There's no one right way to style your React components. It all depends on how complex you ...

【JavaScript】使用DOM修改和查询CSS内联样式

修改样式

查找样式值

更多

【JavaScript】使用DOM修改和查询CSS内联样式相关推荐

最新文章

热门文章