<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        function change(){

            var div=document.getElementById("div1");/*w和h都要用这部分，故单独定义一个div*/

            var w=parseInt(div.style.width);

            var h=parseInt(div.style.height);

            div.style.width=(w+30)+"px";

            div.style.height=(h+50)+"px";

        }

    </script>

</head>

<body>

    <div id="div1" style="width: 150px;height: 123px;background-color: aqua"></div>  <!--设置div初始状态-->

    <button onclick="change()">改变样式</button>

</body>

</html>

点击后：

JS--改变div大小的更多相关文章

  1. js改变盒子大小(上下左右)分析

    js改变盒子大小 知识点 三个mouse事件:mousedown mousemove mouseup css的定位和cursor 思路 先解决单边问题识别范围,得到所选区域 event. 根据距离,判 ...

  2. jquery 拖动改变div大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js改变div高度

    用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina ...

  4. jQuery鼠标拖曳改变div大小（模拟textarea右下角拖曳）

    jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...

  5. js改变div宽度

    document.getElementById('Content_Right_id').style.width = document.documentElement.clientWidth - 250 ...

  6. 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  7. div大小如何改变设置

    如果改变更改div大小尺寸. 首先我们要知道DIV大小是由高和宽确定,要修改DIV容积大小我们设置css宽度和css高度即可实现改变DIV盒子大小. 一.改变div大小实例 为了实验便于观察DIV盒子 ...

  8. 改变字体大小实现自适应之js方案A

    一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...

  9. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  10. js innerHTML 改变div内容的方法

    永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢.改变文字inner ...

随机推荐

  1. LRU java实现

    实现LRU缓存,用到了一个链表和 HashMap, HashMap保证了get/set的时间复杂度是O(1), 链表用来记录 最近最少使用的元素,以便用来淘汰. package lru; /** * ...

  2. pycharm注册码地址

    (1)地址:http://idea.lanyus.com/ (2)注意,在破解的时候,是先修改hosts文件所在路径:“C:\Windows\System32\drivers\etc\hosts”,修 ...

  3. 怎样做大做强企业中的ERP？

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/luozhonghua2014/article/details/37672409           ...

  4. 在命令符模式下编译并执行Java程序

    对于Java初学者,建议使用纯文本文件来编写Java程序,并在命令符模式下使用工具程序编译和执行Java程序.使用javac工具编译.java,使用java工具执行.class.(推荐sublime编 ...

  5. java ClassLoader类加载器

    原文 首先来了解一下字节码和class文件的区别: 我们知道,新建一个java对象的时候,JVM要将这个对象对应的字节码加载到内存中,这个字节码的原始信息存放在classpath(就是我们新建Java ...

  6. swift实现AES解密

    原来的加密解密是用java写的,用在安卓系统上.现在要用在iOS系统上,所以从服务器上下载过来的加密文件要用swift来实现其的解密方法. 具体过程如下: 给NSData增加一个类目,NSData+A ...

  7. 使用vscode写typescript（node.js环境）起手式

    动机 一直想把typescript在服务端开发中用起来,主要原因有: javascript很灵活,但记忆力不好的话,的确会让你头疼,看着一月前自己写的代码,一脸茫然. 类型检查有利有敝,但在团队开发中 ...

  8. SPOJ - REPEATS —— 后缀数组 重复次数最多的连续重复子串

    题目链接:https://vjudge.net/problem/SPOJ-REPEATS REPEATS - Repeats no tags  A string s is called an (k,l ...

  9. Mac OS 配置Maven

    步骤: 1. 下载Maven tar包 https://maven.apache.org/download.cgi?Preferred=http%3A%2F%2Fmirrors.tuna.tsingh ...

  10. jira与wiki官方文档记录

    jira:https://confluence.atlassian.com/display/JIRA/Home wiki:https://confluence.atlassian.com/doc/co ...