JS 修改属性|极客笔记

JS 修改属性

在前端开发中，经常需要通过JavaScript来修改HTML元素的属性，这可以实现动态更新页面内容、改变样式、以及响应用户操作等功能。本文将详细介绍如何使用JavaScript来修改HTML元素的属性。

1. 获取元素

在修改元素属性之前，我们首先需要获取到要操作的HTML元素。有多种方式可以获取元素，最常见的是使用document.getElementById()方法来根据元素的id属性获取元素。我们也可以通过类名、标签名、选择器等方式获取元素。

// 根据id获取元素
var element = document.getElementById("myElement");

// 根据类名获取元素
var elements = document.getElementsByClassName("myClass");

// 根据标签名获取元素
var elements = document.getElementsByTagName("div");

// 根据选择器获取元素
var element = document.querySelector("#myElement");

2. 修改属性

一旦获取到了要操作的元素，就可以通过JavaScript来修改其属性。常见的属性包括innerHTML、innerText、src、href等。

2.1. 修改innerHTML属性

innerHTML属性用于设置或返回指定元素的所有子元素、文本内容以及HTML标记。可以通过修改innerHTML属性来动态更新元素的内容。

// 获取要操作的元素
var element = document.getElementById("myElement");

// 修改innerHTML属性
element.innerHTML = "<p>Hello, World!</p>";

2.2. 修改innerText属性

innerText属性用于设置或返回指定元素的文本内容。与innerHTML不同的是，innerText会忽略任何HTML标记，只显示文本内容。

// 获取要操作的元素
var element = document.getElementById("myElement");

// 修改innerText属性
element.innerText = "Hello, World!";

2.3. 修改src属性

src属性用于设置或返回<img>元素的源文件路径。通过修改src属性，可以实现动态更换图片。

// 获取要操作的图片元素
var image = document.getElementById("myImage");

// 修改src属性
image.src = "newimage.jpg";

2.4. 修改样式属性

除了修改内容和图片等属性外，我们还可以通过JavaScript修改元素的样式属性，如style.color、style.fontSize等，从而改变元素的外观。

// 获取要操作的元素
var element = document.getElementById("myElement");

// 修改样式属性
element.style.color = "red";
element.style.fontSize = "20px";

3. 实战演练

下面通过一个实战演练来进一步理解如何使用JavaScript修改元素属性。假设我们有一个按钮，点击按钮时修改一个<div>元素的背景颜色和文本内容。

<!DOCTYPE html>
<html>
<head>
    <title>Modify Element Property</title>
</head>
<body>

<div id="myDiv" style="width: 200px; height: 200px; background-color: #f0f0f0;">
    Original Content
</div>

<button id="myButton">Change Style and Content</button>

<script>
    var button = document.getElementById("myButton");
    var div = document.getElementById("myDiv");

    button.addEventListener("click", function() {
        div.style.backgroundColor = "lightblue";
        div.innerText = "New Content";
    });
</script>

</body>
</html>

在上面的示例中，当点击按钮时，会修改<div>元素的背景颜色为浅蓝色，并修改文本内容为”New Content”。