<!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. MySQL重启端口被占用处理

    1,查看日志的ERROR 2018-05-23T01:26:59.230382Z 0 [Warning] 'NO_AUTO_CREATE_USER' sql mode was not set. 201 ...

  2. node的express中间件之static之ajax提交json

    static中间件可以使客户端直接访问网站中的所有静态文件. 利用这个功能可以直接把服务器上的静态页面直接读取出来返回到客户端. 从客户端点击一个按钮,向服务器端发送数据.并且插入到mysql数据库中 ...

  3. ERROR无法从静态上下文中引用非静态变量

    ERROR无法从静态上下文中引用非静态变量 2012-06-16 20:58:52 分类: Java 什么是“static”? 学习过java.C++或C的人都应该认识这个关键字.用这个关键字修饰的变 ...

  4. Oracle查看和修改连接数

    1.查询数据库当前进程的连接数:   select count(*) from v$process;   2.查看数据库当前会话的连接数:   elect count(*) from v$sessio ...

  5. JSR-303 结合spring 校验

    使用注解 一.准备校验时使用的JAR validation-api-1.0.0.GA.jar:JDK的接口: hibernate-validator-4.2.0.Final.jar是对上述接口的实现: ...

  6. 魔术方法以及__call的调用

    一.什么是魔术方法? 魔术方法是php中对一类方法的统称,这些方法可以在任何类中被实现.他们通常可以完成一些特殊的无法纯粹依靠自己编程实现的功能.他们通常以双下划线"__"作为名称 ...

  7. BeginInvoke 方法真的是新开一个线程进行异步调用吗？

    转自原文BeginInvoke 方法真的是新开一个线程进行异步调用吗? BeginInvoke 方法真的是新开一个线程进行异步调用吗? 参考以下代码: public delegate void tre ...

  8. ListBox绑定一个对象

    转自原文 C#中ListBox的Items属性是Object对象,如何显示该对象的别名 而真正的则保存在其他的地方 一般是datasource 绑定一个list对象 list 可以是 自定义类型的对象 ...

  9. linux下使用adb查看android手机的logcat

    root@ubuntu:/home/song# adb logcat -s VLC

  10. map的访问

    映射表(map) 在每个条目被插入时将之按键进行排序.取迭代器指向值时将返回value_type结构,它有两个数据成员:first,second.访问first获得键的数据,访问second获得值的数 ...