<!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# 微信openid 用户信息

    前段demo index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  2. Socket 简易静态服务器 WPF MVVM模式（四）

    最重要的一个类Socket类 using System; using System.Collections.Generic; using System.IO; using System.Linq; u ...

  3. 【python】collections模块（有序字典，计数器，双向队列）

    collections模块基本介绍 我们都知道,Python拥有一些内置的数据类型,比如str, int, list, tuple, dict等, collections模块在这些内置数据类型的基础上 ...

  4. linux防火墙（二）—— iptables语法之选项和控制类型

    一.语法: iptables [-t 表名] 选项 [链名] [匹配条件] [-j 控制类型] 未指定表名时,默认用filter表:链名,控制类型要大写:除非设置默认策略,否则必须指定匹配条件:不指定 ...

  5. 1. UML统一建模语言

    (1)UML概述: 建模: 对现实系统进行适当的过滤, 用适当的表现规则描述出简洁的模型. 建模是一种深入解决问题的方法. UML: UML(United Modeling Language, 统一建 ...

  6. 题解 P3252 【[JLOI2012]树】

    \(\Huge{[JLOI2012]树}\) 题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点 ...

  7. Dancing Links算法（舞蹈链）

    原文链接:跳跃的舞者,舞蹈链(Dancing Links)算法——求解精确覆盖问题 作者:万仓一黍 出处:http://grenet.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但 ...

  8. 如何让ie8地址栏下拉框里不显示历史记录和收藏夹

    打开浏览器,点击IE浏览器上方工具——Internet选项——内容——自动完成的设置——地址栏里面的勾勾去掉,浏览历史记录和收藏夹里面的东西就自动没有了

  9. CentOS安装pip并修改源为豆瓣源

    使用yum进行安装 yum install python-pip 若出现 No package python-pip available. 则解决方法如下: yum -y install epel-r ...

  10. Ubuntu Server 中实际内存与物理内存不相等的问题

    记录 来源 v2ex,提到了一个平时不是很起眼的问题,Ubuntu Server 中系统默认会占用 128M 内存,用于 CVM 内部的 kdump 服务. 科普 查看 CVM 所拥有的物理内存 通过 ...