<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    #box {

      width: 100px;

      height: 100px;

      background-color: pink;

    }

    .cls {

      width: 200px;

      height: 200px;

      position: absolute;

      top: 100px;

      left: 100px;

      background-color: pink;

    }

  </style>

</head>

<body>

  <input type="button" value=" 点我 " id="btn">

  <br>

  <div id="box"></div>

  <script src="common.js"></script>

  <script>

    my$('btn').onclick = function () {

      var box = my$('box');

      // 改变box的大小和位置

      // 使用class

      // box.className = 'cls';

      //

      // 使用style  设置大小和位置的时候 数字必须带单位

      box.style.width = '200px';

      box.style.height = '200px';

      box.style.position = 'absolute';

      box.style.left = '200px';

      box.style.top = '200px';

      console.log(box.style);

    }

  </script>

</body>

</html>

common中的代码

function my$(id) {

  return document.getElementById(id);

}

样式操作案例5-改变box的大小和位置的更多相关文章

  1. C++ MFC 改变控件大小和位置

    用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...

  2. MFC 改变控件的大小和位置

    mfc 改变控件大小和位置用到的函数: ) void MoveWindow(int x, int y, int nWidth, int nHeight); ) void MoveWindow(LPCR ...

  3. js操作元素导致元素错位和大小改变

    使用js循环的方式批量控制元素的大小时结果往往不尽如人意. 我总结了一条规律 在一个循环体内不可以同时存在一下两种操作,否则容易导致元素错位或大小改变: 1.对元素的offsetWidth.offse ...

  4. JQuery DOM操作（属性操作/样式操作/文档过滤）

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  5. jquery加载方式，选择器，样式操作

    原生js和css不兼容,jquery已经过测试,可放心使用 https://code.jquery.com   这个网站可以下载jquery的源码,比如把源码下载到js文件夹中,文件名为jquery- ...

  6. jQuery属性和样式操作

    回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...

  7. jQuery 2.0.3 源码分析 样式操作

    根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...

  8. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  9. JavaScipt 样式操作

    我们知道HTML样式定义的三种方式: <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义 给一个HTML元素设置css属性,如: ...

随机推荐

  1. 前后端java+vue 实现rsa 加解密与摘要签名算法

    RSA 加密.解密.签名.验签.摘要,前后端java+vue联调测试通过 直接上代码 // 注意:加密密文与签名都是唯一的,不会变化.// 注意:vue 端密钥都要带pem格式.java 不要带pem ...

  2. Java Record 的一些思考 - 序列化相关

    Java Record 序列化相关 Record 在设计之初,就是为了找寻一种纯表示数据的类型载体.Java 的 class 现在经过不断的迭代做功能加法,用法已经非常复杂,各种语法糖,各种多态构造器 ...

  3. MySQL客户端mysql常用命令

    通过MySQL自带的mysql命令行工具, 执行MySQL的相关命令. 1.连接MySQL服务端 mysql -uUserName -pPassword -h HostName_IP -P 3306 ...

  4. 把rocksdb配置成leveldb

    将rocksdb配置成leveldb 1.配置方法 配置方式有三种: 第一种适合进行性能测试对比:是以参数形式在运行db_bench或ycsb-c的时候以参数形式将rocksdb将其配置成leveld ...

  5. Linux 使用 scp 命令远程拷贝文件和目录

    使用方法: $ scp --help scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o s ...

  6. docker安装minio

    目录 一.简介 二.docker安装 三.java中使用minio上传与下载 一.简介 MinIO 是在 GNU Affero 通用公共许可证 v3.0 下发布的高性能对象存储. 它是与 Amazon ...

  7. solr -创建 core

    需要进入solr安装目录的bin 里,solr start 启动 后,才可以生成core solr create -c [core的名字] 如:solr create -c mycore1 生成位置在 ...

  8. 简单谈谈 TCP/IP

    1.前言 IP 或 ICMP.TCP 或 UDP.TELNET 或 FTP.以及 HTTP 等都属于 TCP/IP 协议. 他们与 TCP 或 IP 的关系紧密,是互联网必不可少的组成部分.TCP/I ...

  9. 使用yum安装php*时报错的解决办法

    # yum -y install php* 注意: php53-odbc64-5.3.3-2.el5.x86_64 from base has depsolving problems  -->  ...

  10. 利用js模拟用户的cookie信息保存

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6814761849708347907/ 默认已完成爬虫文档<爬虫学习文档顺序> 并简单搭建完展示页面和管 ...