<!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. vptr, vtable, virtual base class table

    #include <iostream> using namespace std; class X { int x, y, z; }; class Y: public virtual X { ...

  2. 【BZOJ】3524 [POI2014] Couriers（主席树）

    题目 传送门:QWQ 传送到洛谷QWQ 分析 把求区间第k大的改一改就ok了. 代码 #include <bits/stdc++.h> using namespace std; ; ], ...

  3. 【UVa】1601 The Morning after Halloween（双向bfs）

    题目 题目     分析 双向bfs,对着书打的,我还调了好久.     代码 #include<cstdio> #include<cstring> #include<c ...

  4. CentOS7.6安装Redis

    官网下载地址:https://redis.io/download 第一步:软件下载安装 进行安装目录:cd /opt/software (如果目录不存在,请先创建目录) 下载二进制包:wget htt ...

  5. Quest *nix Xwindows

    国内一般网站搜到的linux系统添加Xwindows都是无法完成的,至少我在Ct6.3上不行,也许是yum源配置不同问题 我举个站点大家自己上去看,本人就不多说了,多说也无益,. http://yao ...

  6. TCP的交互数据流

    在TCP进行数据传输时,可以分为成块数据流和交互数据流两种,如果按字节计算,成块数据与交互数据的比例约为90%和10%,TCP需要同时处理这两类数据,且处理的算法不同. 书籍本章中以Rlogin应用为 ...

  7. leetcode707

    数据结构的题,从网上找到的实现方式,先记录下来. class MyLinkedList { public: /** Initialize your data structure here. */ My ...

  8. 【MongoDB】MongoDB 性能优化 - BI查询聚合

    在BI服务中通过查询聚合语句分析定位慢查询/聚合分析,小结如下: 慢查询定位: 通过Profile分析慢查询 对于查询优化: 通过添加相应索引提升查询速度: 对于聚合大数据方案: 首先要说明的一个问题 ...

  9. U3D 代码自动化生成定制预置体的旋转问题

    //定制预置体 //要求:1,模型面向U3D的Z轴正向(由MAX导出时是面向U3D的X负向的) //2,增加一些常用挂点,3增加一个圆形阴影片,4,添加包围盒 //根据这些要求制作预置休 static ...

  10. 4.Hadoop集群搭建之启动

    配置好Hadoop.HDFS.YARN.Zookeeper集群后,需要按照顺序启动. 前期准备 配置好Hadoop.HDFS.YARN.Zookeeper集群 先stop掉所有的hadoop服务 使用 ...