前端基础 - JavaScript之this关键字

简介: 前端基础 - JavaScript之this关键字

JavaScript之this关键字

JavaScript中的 this , 表示当前元素,谁调用的函数,在函数中的this就代表谁。

案例:鼠标进入div和移出div显示不同的文本

效果:

鼠标在外面

鼠标在里面:

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
      var divElement;
      //init函数
      function init() {
        //在页面加载完毕之后,获取
        divElement = document.getElementById("div001");
        //动态绑定
        divElement.onmouseover = over;
        divElement.onmouseout = out;
      }
      //移入事件,把div的呵呵改成 嘿嘿
      function over() {
        //把div的呵呵 改为嘿嘿
        //divElement.innerHTML = "<font size='6' color='red'>嘿嘿</font>";
        this.innerHTML = "<font size='6' color='red'>嘿嘿</font>";
      }
      //移出事件,把dvi中的嘿嘿 又改回呵呵
      function out() {
        this.innerHTML = "呵呵";
        //divElement.innerHTML = "呵呵";
      }
    </script>
  </head>
  <body "init()">
    <div id="div001" style="border: 1px solid red; background-color: gray; width: 200px; height: 200px;">
      呵呵
    </div>
  </body>
</html>
目录
相关文章
|
JavaScript 前端开发 API
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16730 23
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
902 8
|
JavaScript 前端开发 容器
|
JavaScript 前端开发
|
存储 JavaScript 前端开发
|
移动开发 JavaScript 前端开发
|
存储 JavaScript 前端开发
|
JavaScript 前端开发
|
JavaScript 前端开发

热门文章

最新文章