改变 HTML 样式 Object.style.property=new style;

最新推荐文章于 2023-03-13 10:35:55 发布

原创最新推荐文章于 2023-03-13 10:35:55 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web前端

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用JavaScript通过HTML DOM更改HTML元素的样式。通过示例代码展示了如何修改元素的颜色、背景颜色及宽度等样式。

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

语法:

Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

基本属性表（property）:

注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

结果:

任务

现在我们来改变下HTML中元素的CSS样式:

1. 在右边编辑器中，第12行补充代码，修改h2标签的样式，将颜色设为红色。

2. 在右边编辑器中，第13行补充代码，修改h2标签的样式，将背景颜色设为灰色(#CCC)。

3. 在右边编辑器中，第14行补充代码，修改h2标签的样式，将宽设为300px。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</h2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="yellow";
    mychar.style.backgroundColor:"#CCC";
    mychar.style.width=300px;
  </script>
</body>
</html>