<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .one{

      width: 200px;

      height: 200px;

      background-color: pink;

    }

  </style>

</head>

<body>

<div id="box"></div>

<script>

  //1. 获取元素

  var box = document.getElementById('box');

  //2. 添加一些默认样式

  box.className = 'one';

  //3. 给box注册点击事件

  box.onclick = function(){

      //4. 在事件处理函数中,修改box的位置和背景颜色

      box.style.position = 'absolute';

      box.style.left = '300px';

      box.style.top = '150px';

  }

</script>

</body>

</html>

javascrip总结42:属性操作案例: 点击盒子,改变盒子的位置和背景颜色的更多相关文章

  1. 样式操作案例5-改变box的大小和位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  4. 第7天：javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等

    javascript WEB api------DOM document object model 案例 为元素注册点击事件,弹出对话框 <input type="button&quo ...

  5. Python全栈开发之路 【第十六篇】：jQuey的动画效果、属性操作、文档操作、input的value

    01-动画效果 show 显示 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数: speed:三种预定速度之一的字符串('slow','normal','fast')或 ...

  6. 前端 ----jQuery的属性操作

    04-jQuery的属性操作   jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...

  7. 04-jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

  8. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. sys模块的问题，深浅COPY的应用场景，元祖与购物车程序练习-打印彩色\033[31;1m--------\033[0m

    打印彩色:%s为变量,格式化 print("Added %s into shopping cart,your current balance is \033[31;1m%s\033[0m&q ...

  2. PyQt5对话框

    QinputDialog 输入的值可以是字符串,数字,或者一个项目从一个列表 def showDialog(self): text, ok = QInputDialog.getText(self, ' ...

  3. node的socket.io类库概述

    socket.io是一个简单的小类库,该类库实现的功能类似于node中的net模块所实现的功能. 这些功能包括websocket通信,xhr轮询,jsonp轮询等. socket类库可以接受所有与服务 ...

  4. Windows系统版本型号MSDN版、OEM版、RTM版、VOL版区别

    我们常常听说操作系统的MSDN版.OEM版.RTM版.VOL版等等,它们到底是什么意思,有什么不同呢? (一)MSDN (Microsoft Developer Network)版MSDN软件是微软公 ...

  5. python覆盖率统计

    啦啦啦,最近在跟离线脚本写自动化,真麻烦呀~ 离线任务是python写的,自动化写完了,就得统计覆盖率了. coverage.py是一个用来统计python程序代码覆盖率的工具.网上有很多资料,使用起 ...

  6. svn使用常用错误

    描述 :SVN更新提交显示文件被锁异常: Working copy XXXXXXXX locked Please execute "Cleanup" command 原因 : 待查 ...

  7. 6、数据类型四：sets

    集合的基本特征:无序,唯一. 一个redis集合最多能存放232-1个集合元素.其强大之处在于它支持集合的“交.差.并”运算,而且能够快速的判断某个给定值是否在集合中. 1.基本命令: SADD ke ...

  8. Image与Bitmap的区别及相互转换

    1. Image.FromFile()返回的是某个继承自Image的具体类的对象,在这里,就是Bitmap或者Metafile其中之一.这应该算是factory pattern的一种形式.所以,Ima ...

  9. Spring与Redis的实现

    前言 Redis作为缓存还是相当不错的,一定程度上缓解了数据库的IO操作,具体不多说,具体网上查找资料. 实战 不多说,直接上代码. 第一步:所需要的依赖 <!-- redis --> & ...

  10. FFmpeg库简介

    1.FFmpeg基本组成 FFmpeg框架的基本组成包含AVFormat.AVCodec.AVFilter.AVDevice.AVUtils等模块库,如下图所示. libavformat:用于各种音视 ...