<!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. rsync之脑袋疼

    rsync图片参考 d本地模式,cp的感觉 vzrtopg = a - d -l --delete适用于2个目录完全一样的情况 默认avz就可以了 2,远端的shell 解决ssh链接慢的问题 3.d ...

  2. 《C++ Primer》读书笔记

    在C++中,基类必须指出希望派生类重新定义哪些函数,定义为virtual的函数是基类期待派生类重新定义的,基类希望派生类继承的函数不能定义为虚函数. 引用和指针的静态类型与动态类型可以不同,这是C++ ...

  3. js与jQuery的区分

    Js与Jquery的区分

  4. System.Security.Cryptography.CryptographicException: 系统找不到指定的文件

    默认为false 改为true

  5. 用嵌套List实现DataGrid的主从表显示

    //首先构造嵌套List,也就是一个list在另一个list中充当成员//如:referModels 在res中充当成员var res = totalAffectedMedels.Select(c = ...

  6. 同源策略、CORS

    一.同源策略 同源策略(Same origin policy) 是一种约定, 它是浏览器最核心也是最基本的安全功能 , 如果缺少了同源策略, 则浏览器的正常功能可能都会受影响 , 可以说web是构建在 ...

  7. SDN openflow 学习小得

    一.openflow 大概的工作原理 SDN 的一个大概简陋图, 同网段通讯 1.我们传统网络 pc1 10.1.1.1 要找同一子网的 pc2 10.1.1.2  通过广播洪泛.找到pc2,然后转发 ...

  8. Maven父级pom.xml配置文件

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  9. shell编程——变量的数值计算

    在shell脚本中,有时候会需要对数值类型的变量进行计算,通常我们用的是(()) [root@localhost collect]# ((a=1+2)) [root@localhost collect ...

  10. Delphi数据库的三层架构的问题和解决方法

    Delphi数据库的三层架构的问题和解决方法 原创 2014年03月26日 16:26:03 标签: Delphi / 数据库三层架构 / DCOM / DCOMConnection 790 //-- ...