<!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. [炼丹术]使用Pytorch搭建模型的步骤及教程

    使用Pytorch搭建模型的步骤及教程 我们知道,模型有一个特定的生命周期,了解这个为数据集建模和理解 PyTorch API 提供了指导方向.我们可以根据生命周期的每一个步骤进行设计和优化,同时更加 ...

  2. 云南农职《JavaScript交互式网页设计》 综合机试试卷③——实现二级分类菜单

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用Jquery和JavaScript实现二级分类菜单管理 点击 ...

  3. Windows下安装配置ant

    1.ant安装 请从官网下载ant的*.zip格式的安装包, Windows建议下载*.zip版本, Linux建议下载*.gz版本. 2.配置环境变量 解压之后,在Windows中配置环境变量, 在 ...

  4. ANT 通配符使用说明

    通配符说明 通配符 说明 ? 匹配任意一个字符 * 匹配零个.一个.多个字符 ** 匹配零个.一个.多个目录 使用示例 URL路径 说明 /app/p?ttern 匹配 /app/pattern 和 ...

  5. selenium等待方式详解

    这些方式仅供参考,实际使用体验并不好,最好对find_element()方法进行二次封装. # coding=utf-8 from time import sleep from selenium im ...

  6. 基于Spring实现策略模式

    背景: 看多很多策略模式,总结下来实现原理大体都差不多,在这里主要是讲解下自己基于Spring更优雅的实现方案:这个方案主要是看了一些开源rpc和Spring相关源码后的一些思路,所以在此进行总结 首 ...

  7. Centos下安装Maven私服Nexus

    dockers安装Nexus,指定访问路径(默认为/:在使用Nginx做反向代理时,最好指定访问路径),并在容器外持久化数据,避免Nexus容器升级后数据丢失. 安装并启动 docker run -d ...

  8. 《剑指offer》面试题10- I. 斐波那契数列

    问题描述 写一个函数,输入 n ,求斐波那契(Fibonacci)数列的第 n 项.斐波那契数列的定义如下: F(0) = 0,   F(1) = 1 F(N) = F(N - 1) + F(N - ...

  9. 《剑指offer》面试题63. 股票的最大利润

    问题描述 假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖该股票一次可能获得的最大利润是多少? 示例 1: 输入: [7,1,5,3,6,4] 输出: 5 解释: 在第 2 天(股票价格 = ...

  10. 【C++】类-派生和继承

    类-派生和继承 目录 类-派生和继承 1.基本概念 2. 语法 3. 继承方式 4. 类型转换 5. 派生类的构造.析构函数 构造函数 复制构造函数 析构函数 1.基本概念 继承:保持已有类的特性而构 ...