<!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. Python学习笔记：利用pd.get_dummies实现哑变量编码

    一.理论介绍 虚拟变量(dummy variable)也叫哑变量,是一种将多分类变量转换为二分变量的一种形式. 如果多分类变量有k个类别,则可以转化为k-1个二分变量. 需要有一个参照的类别. 在非线 ...

  2. 线性基（Linear Basis）学习笔记

    前言 我看网络上没有什么非常系统的教学,可能是我太菜了吧,现在才学,做个记录给自己看. 简略介绍 一个数集能两两异或,能表出许多新的数. 线性基是一个集合,能够在记录最少的数的基础上,表示出一个等价的 ...

  3. Star Way To Heaven

    题目描述 小 x伤心的走上了 Star way to heaven. 到天堂的道路是一个笛卡尔坐标系上一个 n*m的长方形通道 顶点在0,0 和 . 小 n,m 从最左边任意一点进入,从右边任意一点走 ...

  4. JMeter_性能压测报错address already in use:connect

    报错截图如下: 原因分析: 这个问题的原因是windows端口被耗尽了(默认1024-5000),而且操作系统要 2~4分钟才会重新释放这些端口,所以可以增加windows的可用端口来解决.windo ...

  5. nginxWebUI

    nginx网页配置工具 github: https://github.com/cym1102/nginxWebUI 功能说明 本项目可以使用WebUI配置nginx的各项功能, 包括http协议转发, ...

  6. xftp 6 的 使用

    1.前言 xftp是个向云服务器linux系统传输文件的软件,装载在window系统 简单易用 2.下载 官方下载地址:https://www.netsarang.com/zh/xftp-downlo ...

  7. 移动端position:fixed 解决方案

    相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个positi ...

  8. Jmeter创建一个http请求

    1.点击'Test Plan'为测试计划命名为"创建用户接口" 2.新建一个[线程组],在[创建用户接口]处点击右键,选择[添加]-->[Threads(Users)]--& ...

  9. 读《疯狂Java讲义》笔记总结二

    1.变量分类图 2.通过实例访问静态变量(类变量) 3.静态导入 4.构造器 5.创建对象内存过程

  10. docker镜像制作及发布

    以centos为例. 主要内容:安装docker,制作镜像,发布镜像. 安装docker 1. 安装docker yum install -y docker 等待一会,安装成功,查看安装列表 2. 启 ...