<!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. 【[APIO/CTSC2007]动物园】状压DP

    题目测评:https://www.luogu.org/problemnew/show/P3622 题目描述 新建的圆形动物园是亚太地区的骄傲.圆形动物园坐落于太平洋的一个小岛上,包含一大圈围栏,每个围 ...

  2. c++多线程基础1(thread)

    std::thread 在 <thread> 头文件中声明,因此使用 std::thread 时需要包含 <thread> 头文件. thread 构造函数: default ...

  3. 【bzoj4036】[HAOI2015]按位或 fmt+期望

    Description 刚开始你有一个数字0,每一秒钟你会随机选择一个[0,2^n-1]的数字,与你手上的数字进行或(c++,c的|,pascal 的or)操作.选择数字i的概率是p[i].保证0&l ...

  4. 题解 P1534 【不高兴的津津（升级版）】

    题目链接 不算太难.就是题目有歧义. wa了好几次才发现.上一天要是小于8的话.结算是昨天一个负值在加上今天课时数.再减去8.233.... 而不是上一天小于8个小时.就清零了..大家要注意(ps:题 ...

  5. luoguP3690 列队

    https://www.luogu.org/problemnew/show/P3960 作为一个初二蒟蒻要考提高组,先做一下17年的题目 我们发现进行一次操作相当于 把第 x 行的第 y 个弹出记为 ...

  6. django中ModelForm解决多表单组合显示问题

    一.多表单组合显示问题 在项目中用ModelForm生成页面时 当有多表单组合显示时,会显示全部的关联表单数据. 而在实际项目中可能会出现只想让用户选择部分数据,这时候这样的显示就有问题. 二.问题解 ...

  7. 条目十二《切勿对slt容器的线性安全性又不切实际的依赖》

    条目十二<切勿对slt容器的线性安全性又不切实际的依赖> 这一条目,我想用简短而有力的语句来总结. stl库是为了照顾大多数情况,而不是某一领域,如果在库层次实现线性安全,很大可能是对性能 ...

  8. Hdp 4 window MR 注意事项

      1,本机未安装HDP, 在代码中加一个环境变量,跳过检查. Environment.SetEnvironmentVariable("HADOOP_HOME", @"D ...

  9. java 的在线下载文件 .pdf

    java  的在线下载文件  .pdf 1.下载资源的本地位置 2.设置响应头 3.下载代码 1 PeriodicalResource periodicalResource = periodicalR ...

  10. FPGA基础学习(3) -- 跨时钟域处理方法

    文章主要是基于学习后的总结. 1. 时钟域 假如设计中所有的触发器都使用一个全局网络,比如FPGA的主时钟输入,那么我们说这个设计只有一个时钟域.假如设计有两个输入时钟,如图1所示,一个时钟给接口1使 ...