<!DOCTYPE html>

    <html>

        <head>

            <title>点击按钮div变色.html</title>

            <meta charset="utf-8" />

        </head>

        <body>

            <!--点击改变当前div的颜色，所以要给onclick这个事件的函数传递当前的对象即可-->

            <div style="width:300px;height:30px;padding-top:10px;background:#3bb4f2;" onclick="changeColor(this)">

          开始

            </div>

        </body>

        <script>

        //这个事件的目的是：当我们点击时要怎么处理

            function changeColor(obj)

            {

                //因为JS会把HTML标签当做一个对象

                //对象.属性 = 值;

                obj.style.background = 'pink';

            }

        </script>

    </html>

本专题记录平时项目中一些最基础简单的实现代码和容易忽略的细节，仅仅是为了记录，对于自己来说，基础是最重要的，一个项目就是由无数的基础组成。

注：

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

前端切图|点击按钮div变色的更多相关文章

  1. 前端切图相关ps技术

    标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...

  2. 前端切图神器-cutterman

    之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...

  3. 前端切图实战（PSD设计稿转化为前端）

    课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...

  4. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  5. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  6. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  7. 前端切图要选择png和jpg呢？

    今天特意验证了一下: 切完图分别保存png24.png8和jpg60.jpg80(60和80表示保存图片时品质选择)后, 然后再压缩图片,压缩图片地址:https://tinypng.com/ 图片直 ...

  8. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

  9. 前端切图:调用百度地图API

    原型图 图片发自简书App <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. Server.UrlEncode与HttpUtility.UrlEncode的区别

    一.HttpUtility.UrlEncode 方法 1.public static string UrlEncode(byte[]) 将字节数组转换为已编码的 URL 字符串. 2.public s ...

  2. while my time-- , will the meaning++?

    // while my time--,will the meaning++? // However,what's the meaning of life ? while(tomorrow>0){ ...

  3. git hub在windows上的使用

    每次使用都需要查找,太麻烦了. 转过来自己用! git hub在windows上的使用 一. 首先安装客户端 Git for Windows. 按提示默认安装后,进入git bash(桌面上) 首先检 ...

  4. CF 439C（251C题）Devu and Partitioning of the Array

    Devu and Partitioning of the Array time limit per test 1 second memory limit per test 256 megabytes ...

  5. Linux下Oracle的sqlplus中上下左右退格键无法使用

    一.配置yum源并安装readline* 配置本地yum 1.挂载光盘 mount /dev/cdrom /mnt/media 2,新建本地yun源的配置文件 vi /etc/yum.repos.d/ ...

  6. js---07 js预解析，作用域---闭包

    js解析器首先不会逐行读代码,这是第二部了. 首先 根据var找到变量,根据function找函数,找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义,并不会读取等 ...

  7. 49.大量qq号及qq密码挖掘到结构体并实现精确分配内存以及快速排序

    原数据: 处理后的数据: 完整代码: //思路; //数据清洗(把空格替换成'\0') -> 精确获取每一行(要提前获取source的总长度) -> 获取出每一行再精确分割并把分割后的数据 ...

  8. Spark MLlib回归算法LinearRegression

    算法说明 线性回归是利用称为线性回归方程的函数对一个或多个自变量和因变量之间关系进行建模的一种回归分析方法,只有一个自变量的情况称为简单回归,大于一个自变量情况的叫做多元回归,在实际情况中大多数都是多 ...

  9. MATLAB —— 编程基础

    字符串 abs —— 输出字符串ascii码 strvcat —— 把多个字符串横向连接成长字符串 fprintf —— 把格式化的文本写到文件中或显示屏上 int2str —— 整数转换成字符串 n ...

  10. [置顶] Docker学习总结（3）——Docker实战之入门以及Dockerfile（三）

    应用镜像 csphere/wordpress:4.2 # cd docker-training/wordpress/ # ls -a . license.txt wp-config-sample.ph ...