JavaScript--改变 HTML 的值

最新推荐文章于 2023-09-08 15:53:46 发布

程序员老李头

最新推荐文章于 2023-09-08 15:53:46 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签： html javascript css

本文链接：https://blog.csdn.net/m0_74293254/article/details/131694662

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

要改变 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>

运行结果:

程序员老李头

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript--改变 HTML 的值

要改变 HTML 元素的值，可以使用以下方法：1.使用元素节点的 innerText 属性来改变元素的文本内容。例如：element.innerText = '新的文本内容';2.使用元素节点的 innerHTML 属性来改变元素的 HTML 内容。例如：element.innerHTML = '新的HTML内容';3.使用元素节点的属性来改变 HTML 元素的属性值。例如：element.attribute= '新的属性值';
复制链接

扫一扫