JavaScript--改变 HTML 的值

news2024/11/26 11:30:24

要改变 HTML 元素的值，可以使用以下方法：

1.使用元素节点的 innerText 属性来改变元素的文本内容。
例如：element.innerText = '新的文本内容';

2.使用元素节点的 innerHTML 属性来改变元素的 HTML 内容。
例如：element.innerHTML = '新的HTML内容';

3.使用元素节点的属性来改变 HTML 元素的属性值。
例如：element.attribute= '新的属性值';

4.使用元素节点的 setAttribute 方法来改变 HTML 元素的属性值。
例如：element.setAttribute('attribute', '新的属性值');

5.使用元素节点的 style 属性来改变 HTML 元素的行内样式值。
例如：element.style.样式 = '新的样式值';

注明:

属性（attribute）是指描述事物特征、性质或状态的特征。在计算机科学中，属性通常用于描述对象、元素或数据的附加信息。它们提供了关于对象的更多详细信息，可以用于标识、分类、操作和控制对象的行为。

在不同的领域和编程语言中，属性的具体含义可能会有所不同。例如，在 HTML 中，属性是用于定义 HTML 元素的特征和行为的。每个 HTML 元素都可以具有一组预定义的属性，如 id、class、src 等，用于指定元素的唯一标识、样式和其他相关信息。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>使用JavaScript改变HTML元素的值</title>
</head>
<body>
    <h1 id="myHeading">原始标题</h1>
    <p id="myParagraph">原始段落</p>

    <script>
        // 使用元素节点的 innerText 属性来改变元素的文本内容
        var heading = document.getElementById('myHeading');
        heading.innerText = '新的标题';

        // 使用元素节点的 innerHTML 属性来改变元素的 HTML 内容
        var paragraph = document.getElementById('myParagraph');
        paragraph.innerHTML = '<strong>新的段落</strong>';

        // 使用元素节点的属性来改变 HTML 元素的属性值
        heading.id = 'newHeadingId';

        // 使用元素节点的 setAttribute 方法来改变 HTML 元素的属性值
        paragraph.setAttribute('class', 'highlight');

        // 使用元素节点的 style 属性来改变 HTML 元素的行内样式值
        paragraph.style.color = 'blue';
    </script>
</body>
</html>