<!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. netty系列之:netty对SOCKS协议的支持

    目录 简介 SocksMessage Socks4Message Socks5Message 总结 简介 SOCKS是一个优秀的网络协议,主要被用来做代理,它的两个主要版本是SOCKS4和SOCKS5 ...

  2. pytest执行用例：明明只写了5个测试用例， 怎么收集到33个！？

    pytest收集测试用例的顺序: 同一个项目中搜索所有以test_开头的测试文件.test_开头的测试类.test_开头的测试函数 执行测试用例的顺序: 是按照先数据(0~9)>再字母(a~z) ...

  3. Foxmail：‘错误信息:由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败’的解决办法

    每日必开-Foxmail 但是有连续半个多月未收到1封邮件 心想 大过年的 大家都不发邮件了 么 并未特别在意 直到该接收工资条的日子 我的Foxmail依然毫无动静 点了一下 收取 结果报如下错误: ...

  4. Cookie.Session到Token和JWT

    一.session和cookie: 现在一般都是session和cookie一起用,一起提.但是他们俩其实不是一定要在一起. session的产生原因是,http协议是无状态的 这就导致了,不同的用户 ...

  5. Autofac实现有条件的DI

    Autofac.Annotation框架是我用.netcore写的一个DI框架,基于Autofac参考 Spring注解方式所有容器的注册和装配,切面,拦截器等都是依赖标签来完成. 开源地址:http ...

  6. Word2010制作简单个人简历

    原文链接:https://www.toutiao.com/i6489366535050625550/ 以学习使用按钮属性为主,具体样式可以根据个人设置 选择"页面布局"选项卡,&q ...

  7. live-server使用指南

    一.安装 npm -g install live-server 二.配置 --port=NUMBER` - 选择要使用的端口,默认值:PORT env var或8080--host=ADDRESS` ...

  8. Redis 事务支持 ACID 么？

    腾讯面试官:「数据库事务机制了解么?」 「内心独白:小意思,不就 ACID 嘛,转眼一想,我面试的可是技术专家,不会这么简单的问题吧」 程许远:「balabala-- 极其自信且从容淡定的说了一通.」 ...

  9. shell基础知识查缺补漏

    最近在看<Linux程序设计(第4版)>,其中有一个章节主要讲了shell脚本方面的,内容不细,但是利用较短的篇幅讲的也不少了.对我们自己来说也是一个查缺补漏的过程,所以就写下这篇读书笔记 ...

  10. k8s的应用包管理工具helm的部署和使用

    1.概述 我们一般是在k8s里面部署一些简单的应用,比如用deployment,daemonset,statefuleset的方式来部署应用,但是如果要部署一些复杂的应用,那么整个配置的编写.部署的过 ...