<!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. 在centOS5.9安装mysql

    网上的信息实在是太乱了,好多出了错的,我这个是自己亲自配置,其实就简简单单的几步:如果你的系统里有以前遗留的文件,用rm -rf文件名删除掉 1.安装MySQL客服端和服务器端             ...

  2. mysql server id一样导致报错

    (root@localhost) 16:03:38 [(none)]> show slave status \G; Last_IO_Errno: 1593 Last_IO_Error: Fata ...

  3. 由 MySQL server 和 mysql-connector 版本的不匹配引发的一场惊魂

    剧情还原 今天原计划给领导演示一个小Demo, 昨天在自己机器上调通OK以后就下班了... 今天上午早会后,领导说 “昨天,我让我们IT同事把新的测试环境搭建好了,XXX 你把要演示的Demo部署到上 ...

  4. [lua]判断nginx收到的是否json

    local post_data = ngx.req.get_body_data() --[[ngx.log(ngx.ERR, 'post data:', post_data)]] local ok, ...

  5. 【转】浅析VO、DTO、DO、PO的概念、区别和用处

    原文地址:http://blog.csdn.net/zjrbiancheng/article/details/6253232 概念: VO(View Object):视图对象,用于展示层,它的作用是把 ...

  6. Oracle播放多条 INSERT ALL

    Oracle INSERT ALL 语句介绍 Oracle INSERT ALL 语句用来用一个 INSERT 语句添加多行.该行可以只使用一个SQL命令插入到一个表或多个表. 语法 Oracle I ...

  7. js函数——倒计时模块和无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. K2 Blackpearl中从数据库直接删除流程实例之K2ServerLog表

    转:http://www.cnblogs.com/dannyli/archive/2012/11/29/2794845.html /********************************** ...

  9. C#实现并口输出输入高低电位

    PC并行口各阵脚定义: 1.选通,PC->Printer 2-9 数据(D0-D7) 10.应答(ACK),Printer->PC 11.忙(BUSY),Printer->PC 12 ...

  10. LNK2026: 模块对于 SAFESEH 映像是不安全的<转>

    转自VC错误:http://www.vcerror.com/?p=162 错误描述: 在使用VS2012编译工程时,提示错误:" error LNK2026: 模块对于 SAFESEH 映像 ...