前端基础 - 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 = “” 可以清除里面的样式

目录
相关文章
|
16天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
18天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
19天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
22天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
45 5
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
52 0
|
16天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
16 5
|
2天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
12 4
|
10天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
10天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?