DOM基础教程之使用DOM + Css

2023年6月10日下午1:15 • JavaScript

DOM（Document Object Model）是一种用于处理HTML，XML等文档的接口。使用DOM结合CSS可以实现丰富多彩的网页效果，接下来我们来讲解使用DOM和CSS的完整攻略。

步骤1：在HTML中引入CSS文件

首先，在HTML头部引入CSS文件，以便在DOM中使用CSS样式。

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

步骤2：获取页面元素并设置CSS样式

获取页面元素可以通过document对象和元素id等方式实现。比如，我们可以通过document.getElementById()方法获取页面中具有特定id的元素，并通过style属性设置CSS样式。

<body>
  <div id="myDiv">This is my div</div>
</body>

var divElement = document.getElementById("myDiv");
divElement.style.color = "red";
divElement.style.backgroundColor = "yellow";

步骤3：添加、删除、替换页面元素

通过DOM，我们可以动态添加、删除、替换页面元素，实现页面的动态效果。比如，我们可以通过createElement()方法创建一个新的元素，通过appendChild()方法添加到现有的元素中。

<body>
  <div id="myDiv">This is my div</div>
</body>

var newElement = document.createElement("p");
var textNode = document.createTextNode("This is a new element");
newElement.appendChild(textNode);
var divElement = document.getElementById("myDiv");
divElement.appendChild(newElement);

示例1：点击按钮显示隐藏的文本

<body>
  <button id="myButton">Toggle Text</button>
  <div id="myDiv" style="display:none">This is hidden text.</div>
</body>

var buttonElement = document.getElementById("myButton");
var divElement = document.getElementById("myDiv");

buttonElement.onclick = function() {
  if (divElement.style.display === "none") {
    divElement.style.display = "block";
  } else {
    divElement.style.display = "none";
  }
}

示例2：鼠标悬浮图片放大

<body>
  <img id="myImage" src="myimage.jpg" style="width:100px;height:100px;">
</body>

var imgElement = document.getElementById("myImage");

imgElement.onmouseover = function() {
  imgElement.style.width = "200px";
  imgElement.style.height = "200px";
}

imgElement.onmouseout = function() {
  imgElement.style.width = "100px";
  imgElement.style.height = "100px";
}

以上就是使用DOM和CSS的完整攻略，通过学习和练习，你可以创造出更加丰富、多彩的网页效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：DOM基础教程之使用DOM + Css - Python技术站