前端基础 - JavaScript之innerHTML方法

简介: 前端基础 - JavaScript之innerHTML方法

innerHTML方法

需求:

需要把文本“小猪佩奇身上纹,掌声送给社会人”,由黑色变成红色,效果图如下:

20190308145103168_.png

变颜色后:

20190308145136621_.png

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      window.onload = function() {
        var peiQiId = document.getElementById("peiqiId");
        peiQiId.innerHTML = "<font color='#FF0000'>" + peiQiId.innerText + "</font>";
      }
    </script>
  </head>
  <body>
    <div id="peiqiId">小猪佩奇身上纹,掌声送给社会人</div>
  </body>
</html>

使用 innerHTML 还可以使 innerHTML = “” 可以清除里面的样式

目录
相关文章
|
10月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
474 69
|
9月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
849 0
|
9月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
975 80
|
11月前
|
JavaScript 前端开发 API
|
10月前
|
JSON 前端开发 JavaScript
前端工具方法整理
前端工具方法整理
224 8
|
11月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
405 8
|
11月前
|
JavaScript 前端开发
|
11月前
|
存储 JavaScript 前端开发
|
11月前
|
移动开发 JavaScript 前端开发
|
11月前
|
存储 JavaScript 前端开发

热门文章

最新文章