<!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. [C++]高效C/C ++编程tips

    Effective C++ 视C++ 为一个语言联邦(C.Object-Oriented C++.Template C++.STL) 宁可以编译器替换预处理器(尽量以const.enum.inline ...

  2. IM2603资料 Type-C 扩展坞电源管理芯片

    用于带有集成降压转换器的 Type-C 外围应用的电源管理 IC IM2603 是一款主要用于 Type-C 外围应用的电源管理 IC. 它集成了一个带有内置高侧 MOSFET 的同步降压转换器和一个 ...

  3. 替代瑞昱RTD2166|pin对pin替代RTD2166|CS5202芯片

    替代瑞昱RTD2166,pin对pin替代RTD2166,外围器件少,设计版框尺寸小,整套方案成本BOM更低. 一. CS5202功能概述  CS5202是一款DP端口到VGA转换器,它结合了DP输入 ...

  4. Java初学者作业——编写 Java 程序，在控制台中输入日期，计算该日期是对应年份的第几天。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,在控制台中输入日期,计算该日期是对应年份的第几天. 实现思路: (1)声明变量 year.month和 date,用于存储日期中的年.月.日 ...

  5. 【MySQL作业】多表连接查询——美和易思多表连接查询应用习题

    点击打开所使用到的数据库>>> 1.获取订单 ID 为 4 的订购明细信息,要求输出商品名.单价和件数. 连接三张表:订单表.订单明细表和商品表. select goodsName ...

  6. CF786C Till I Collapse

    题目分析 首先,对于这道题,可以用贪心以一个\(O(n)\)的复杂度求解一个\(k\)的值 暴力是\(O(n^2)\)的复杂度,当然过不了. 我们手推一下样例,会发现,答案满足单调性,于是,果断想到二 ...

  7. python中多模块导入的注意点

    导入模块常见的方式有  import xxx ,from xxx import yyy  或者 from xxx import yyy as a(为导入包(方法)取别名主要用于防止包名与模块中的变量重 ...

  8. JS中void(0)操作符的使用

    今天 在看源码时,发现这种写法 if(value === void(0)){ // } 以前没有见过这种写法,感觉就是判断一个变量是否有值,官网上是这样说的: void运算符 对给定的表达式进行求值, ...

  9. idea 更换 maven ，并更换阿里镜像

    1 ctrl + alt + s 打开设置, 找到Maven 修改maven包的地址,然后修改settings.xml 注意了,有时候repository没有,那么需要在settings.xml配置r ...

  10. linux VI命令快捷键

    ctrl+f  下一页 ctrl+b 上一页 ctrl+u 上半页 ctrl+d 下半页 数字+空格键 根据当前光标移动多少个字母 0键 光标移动到第一个字母,是当前行的 $键 光标移动到最后一个字母 ...