<!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. 浅谈PHP面向对象编程（五、继承）

    5.0 继承 5.1 继承的概念 在现实生活中,继承一般指的是子女继承父辈的财产.在程序中,继承描述的是事物之间的所属关系,通过继承可以使许多事物之间形成一种关系体系 . 例如猫和狗都属于动物,程序中 ...

  2. maven release plugin插件

    1.打包版本区别 SNAPSHOT 快照版本(开发阶段,不稳定,容易出现bug)RELEASE 正式版本(外部依赖使用阶段,稳定,很少出现bug)Tag :标记每次代码提交的版本(比较稳定,类似分支) ...

  3. OSPF理论介绍

    OSPF协议Open Shortest Path First是链路状态协议.RIP和EIGRP是距离矢量协议只知道邻居,但链路状态可知道全网信息,因此天然免疫环路.距离矢量协议和链路状态协议最大的区别 ...

  4. [Python] IMG to Char

    Change image into character from PIL import Image import argparse #输入 #命令行输入参数处理 parser = argparse.A ...

  5. jquery制作滚动条到一定位置触发

    $(function(){ var nav=$(".nav"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);/ ...

  6. optparse模块

    optparse模块主要是用来对参数的记录,相对来说比较灵活, 例子代码如下: #!/usr/bin/env python from optparse import OptionParser usag ...

  7. 4.redis 键

    转自:http://www.runoob.com/redis/redis-tutorial.html Redis 键(key) Redis 键命令用于管理 redis 的键. 语法 Redis 键命令 ...

  8. RHCE7 学习里程-4用户权限，简单进程管理

    #创建用户 useradd abc 使用 vipw 命令查看 /etc/passwd 文件下 是否存在新用户 #G却换到最后一行 #创建账号的时候,默认也新建了一个组,组名跟用户名一样 groupad ...

  9. avalon 的HTML规范

    由于avalon以绑定属性实现对DOM的选择与操作,页面的美观与调试就变得至关重要.参照boostrap的HTML规范,制定如下 属性排列的规范 class (class, id, name与浏览器的 ...

  10. Core Data 入门

    1. 基本概念 Core Data是一种被称为对象关系映射(Object-Relational Mapping,ORM)技术的实现. Core Data 架构图如下: 五个概念: (1)数据模型(Da ...