<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            color: #0000cc;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div>
        <div onclick="func(this)"  name="book1">hello 1</div>
        <div onclick="func(this)"  name="book2">hello 2</div>
        <div onclick="func(this)"  name="book3">hello 3</div>
        <div onclick="func(this)"  name="book4">hello 4</div>
    </div>
<script>                                                              //onclick 绑定的函数 传参数 关键字this
    function func(a) {                                                //  点击后直接获取本点击对象
        alert(a.getAttribute("name"));                                // 只能用getattribute 可以获得对象中的各种属性 name
        alert(a.innerHTML);                                            // 获取文本内容

        a.setAttribute("class","div1")                                 // 同样也可以给点击事件的对象 加入属性 class="div1"
    }                                                                   // div1 原来并没有加入 点击后 改变了字体大小颜色
</script>
</body>
</html>

js 中onclick 事件 点击后指向自己的对象,查找或者添加属性 用关键字this 传入参数 (可以改变原标签css)的更多相关文章

  1. JS中的事件、数组、节点对象处理

    在JS代码中编写事件一定要保证页面在浏览器中加载时会把事件加载进页面 事件:在代码中可以通过一个动作来触发另一个行为的总称 A:事件的编写方式1 HTML标签中添加 onxxxx = "函数 ...

  2. JS中onclick事件传参

    美术馆案例中,需要将“增加一个img标签,放入大图片”这样一个函数封装,但是在调用的时候需要传参. <script type="text/javascript"> on ...

  3. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  4. 看懂此文，不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  5. js中冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  7. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  8. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  9. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

随机推荐

  1. php 可变数量的参数列表

    可变数量的参数列表 PHP 在用户自定义函数中支持可变数量的参数列表.在 PHP 5.6 及以上的版本中,由 ... 语法实现:在 PHP 5.5 及更早版本中,使用函数func_num_args() ...

  2. angular HTML属性绑定

  3. 光猫烽火Hg220破解超级口令实用图文教程（亲测）

    1.用光猫背后的useradmin 帐号和密码登录 192.168.1.12.然后下载http://192.168.1.1/backupsettings.conf3.用记事本打开,ctrl+F,查找关 ...

  4. 我的csdn博客地址

    呆雁 持续的谦虚与努力 http://blog.csdn.net/u013539183

  5. Unity---动画系统学习(5)---使用MatchTarget来匹配动画

    1. 介绍 做好了走.跑.转弯后,我们就需要来点更加高级的动画了. 我们使用自带动画学习笔记2中的FQVault动画,来控制人物FQ. 在动画学习笔记4的基础上添加Vault动画. 添加一个参数Vau ...

  6. Docker - 使用 Nexus3 搭设私有 NuGet 仓库

    目录 前言 NuGet Nexus 私有仓库 说明 安装 Nexus 拉取 Nexus 镜像 运行 Nexus Nexus NuGet 仓库简单使用 Nexus 默认帐号 Repositories 上 ...

  7. 【离散数学】 SDUT OJ 1.3按位AND和按位OR

    1.3按位AND和按位OR Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 已知长度为 ...

  8. 安装jdk环境

    1.jdk安装包准备: 下载链接:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  9. js 定时器的用法和清除

    一.设置定时器 window对象提供了两个方法来实现定时器的效果, 分别是window.setTimeout()和window.setInterval.其中前者可以使一段代码在指定时间后运行:而后者则 ...

  10. struts2学习笔记（二）—— struts2的架构【转】

    一.系统架构   Struts2的官方文档附带了Struts2的架构图. 从这张图能够非常好的去理解Struts2 关于图中的Key: Servlet Filters:过滤器链,client的全部请求 ...