通过 JavaScript 改变元素的样式

最新推荐文章于 2024-01-27 12:22:35 发布

kllo__

最新推荐文章于 2024-01-27 12:22:35 发布

阅读量2.7k

点赞数

分类专栏： javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/kllo__/article/details/122843779

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<html>
 <head>
 </head>
 <body>
   
	<p>First</p>
	<p style="color: green;">Second</p>
	<p id="para">Third</p>
   
 </body>
</html>

样式属性

DOM 元素具有一个名为 style 的属性，该属性返回一个表示 HTML 元素 style 属性的对象。通过使用 JavaScript 定义这些属性，就可以修改元素的属性。下面的代码修改了第一段的文本颜色和边距。

const paragraphElement = document.querySelector("p");
paragraphElement.style.color = "red";
paragraphElement.style.margin = "50px";

复合 CSS 属性

由两个单词组成，例如 fontFamily 、backgroundColor。

// ...
paragraphElement.style.fontFamily = "Arial";
paragraphElement.style.backgroundColor = "black";

style 属性的限制

尝试显示每个段落的文本颜色：

const paragraphElements = document.getElementsByTagName("p");
console.log(paragraphElements[0].style.color); // "red"
console.log(paragraphElements[1].style.color); // "green"
console.log(paragraphElements[2].style.color); // Show an empty string

我们发现第三段的颜色无法显示，因为我们无法访问在别处定义的样式声明（这里是在 css 文件中定义的）。

访问元素方式

访问元素样式的更好的解决方案是使用 getComputedStyle() 函数。该函数将 DOM 节点作为参数，并返回第一个表示元素样式的对象。

const paragraphStyle = getComputedStyle(document.getElementById("para"));
console.log(paragraphStyle.fontStyle); // "italic"
console.log(paragraphStyle.color);     // color blue in RGB values

kllo__

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
通过 JavaScript 改变元素的样式

<html> <head> </head> <body> First Second Third </body></html>样式属性DOM 元素具有一个名为 style 的属性，该属性返回一个表示 HTML 元素 sty.
复制链接

扫一扫