<!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. 按键精灵saystring无法使用的几种解决方案

    1.当输入密码无法使用“SayString”.“Ctrl+V”时,改用“KeyPress”的方法 戏谷游戏的登录画面,“密码输入” 是会挡按键精灵的“SayString”这指令,还有“Ctrl+V”贴 ...

  2. linux下echo命令详解

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 例如: echo $JAVA_HOME /export/se ...

  3. Android:解决重复打开界面问题

    点击界面A按钮,打开界面B,由于startActivity操作是异步执行的,假如在短时间内快速点击按钮,可能会导致打开多个B界面,这个时候可以重写Activity的startActivity事件. p ...

  4. Julia - 循环

    while 循环 当 while 后的条件成立的话,执行循环体内的语句,直到条件不成立,跳出循环 如果条件一直成立,或者循环体中的语句没有能让条件不成立的,则是死循环 julia> i = 1; ...

  5. Python小知识点（2）

    1.简述Python的运行过程 在说这个问题之前,我们先来说两个概念,PyCodeObject和pyc文件. 我们在硬盘上看到的pyc自然不必多说,而其实PyCodeObject则是Python编译器 ...

  6. [Z]用subcaption包排版子图（表）与图（表）格式设置

    很不错的一篇文章,可以进一步参考caption和subcaption的文档: http://www.peteryu.ca/tutorials/publishing/latex_captions

  7. 使用Spring的HttpInvoker

    Spring开发团队意识到RMI服务和基于HTTP的服务(例如Hessian和Burlap)之间的空白.一方面,RMI使用Java标准的对象序列化机制,但是很难穿透防火墙.另一方面,Hessian和B ...

  8. t讯src的一点小秘密

    1.腾讯网首页发表评论未做限制 风险url:http://coral.qq.com/2774166934 使用burp的intruder模块生成payload 未做任何限制导致可批量提交大量的评论…… ...

  9. Redis 主从同步配置

    主从功能: 为了防止 Redis 磁盘损坏,导致数据丢失,Redis 提供了复制功能,将一个主数据库的数据自动同步到从数据库,防止数据丢失. 同时还可以配置一主多从来分担主压力,主只接受写的操作,将读 ...

  10. 导入本体到Jena TDB数据库

    本体的存储方法或称本体持久化,大致分为基于内存的方式.基于文件的方式.基于数据库的方式和专门的管理工具方式4种(傅柱等, 2013).其中,基于数据库的方式又有基于关系数据库.基于面向对象数据库.基于 ...