DOM元素节点操作样式

最新推荐文章于 2022-10-31 17:57:09 发布

路飞小朋友

最新推荐文章于 2022-10-31 17:57:09 发布

阅读量317

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wozhangyi/article/details/107292490

版权

样式声明对象 link

CSSStyleDeclaration 对象表示一个CSS属性的集合

通过JS修改元素样式

通过style对象来操作元素的内联样式
通过window对象的方法来读取元素的当前显示样式（不属于DOM了）

通过style对象来操作元素的行内样式

语法：

读取语法：元素.style.样式名
修改语法：元素.style.样式名 = 样式值

	// 读取语法
    元素.style.样式名
    元素.style["属性"];  //这种读取方式可以给属性传递参数（变量）
	// 修改语法
	元素.style.样式名 = 样式值;

使用细节：

style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式
对于元素节点来说style是属性，对于style本身来说，它是个对象
通过style修改和读取的样式都是行内样式，由于行内样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效，但是如果样式中设置了!important，则行内样式将不会生效

通过cssText一次性设置行内样式：

cssText这个属性，其实就是把行内样式里面的值当做字符串来对待，在上方代码的基础之上，举例：

    <script>
        var box1 = document.getElementsByTagName("div")[0];
        //通过cssText一次性设置行内样式
        box1.style.cssText = "width: 300px;height: 300px;background-color: green;";
        console.log(box1.style.cssText);   //这一行更加可以理解,style是对象
    </script>

代码示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content=

最低0.47元/天解锁文章

路飞小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM元素节点操作样式

通过JS修改元素样式在DOM当中，如果想设置样式，有两种形式：className（针对内嵌样式）style（针对行内样式）这篇文章，我们就来讲一下style。使用style属性来操作元素的内联样式语法：读取语法：元素.style.样式名修改语法：元素.style.样式名 = 样式值 // 读取语法元素.style.样式名元素.style["属性"]; //这种读取方式可以给属性传递参数（变量） // 修改语法元素.style.样式名 = 样式值;
复制链接

扫一扫