<!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. c# 对象反射赋值未知属性需类型转换

    反射某个类时,对于类的属性,字段.已知有已知的方法,未知有未知的写法. 而SetValues赋值则需要类型转换 情况1,该属性类型是已知类型,例如:int int value=500; propert ...

  2. dubbo 安装部署Windows

    1 安装zookeeper 2 安装dubbo    1 下载源码 https://github.com/alibaba/dubbo 2 编译 mvn clean package install -D ...

  3. go与c互相调用

    此例子来自于go源码中,借此来和大家分享一下两者如何调用,网上很多文章语言不详,也没有一个完整的测试例子 目录结构 首先src 目录下有 testcgowin目录下: 这里的_obj目录是cgo生成的 ...

  4. cinder侧挂载卷流程分析

    cinder侧挂载卷流程分析,存储类型以lvm+iscsi的方式为分析基础cinder侧主要调用了三个接口1)reserve_volume: 把volume的状态改为attaching,阻止其它节点执 ...

  5. 多线程《五》GIL全局解释器锁

    一 引子 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple native t ...

  6. rsync入门

    rsync是Linux/unix下一个用于远程文件(目录)同步的一个精巧的小工具程序,有很多文章讨论了其功能和实现原理,本文主要就不赘述了. 主要介绍下实践时使用的一些方法和细枝末节留作工作笔记以便日 ...

  7. WebApplicationContext wac=WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());这句话的意思

    在jsp中出现 提取的代码: <%   WebApplicationContext wac = WebApplicationContextUtils     .getWebApplication ...

  8. 安装GCC-8.3.0及其依赖

    目录 目录 1 1. 前言 1 2. 安装日期 1 3. GCC国内镜像下载地址 2 4. GCC的依赖库 2 4.1. gmp库 2 4.2. mpfr库 2 4.3. mpc库 2 4.4. m4 ...

  9. ansible基本模块-yum

    ansible   XXX   -m   yum   -a  "name=XXX"

  10. Python之freshman02

    内置方法:https://docs.python.org/3/library/functions.html?highlight=built#abs 一.数学运算 1.abs()-取绝对值 2.divm ...