<!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. java List复制：浅拷贝与深拷贝

    Java的拷贝可以分为三种:浅拷贝(Shallow Copy).深拷贝(Deep Copy).延迟拷贝(Lazy Copy). 在java中除了基本数据类型之外(int,long,short等),还存 ...

  2. ubuntu14.04设置sublime text3为默认文本编辑器

    更新时间2017年07月20日17:35:04 原来的方法貌似并不试用,现在才发现,其实ubuntu下也和Windows下一样... 右键,属性,然后如图所示 set as default 即可. 之 ...

  3. JS深入理解系列（一）：编写高质量代码

    在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象.通常的循环形式如下: // 次佳的循环for (var i = 0; i < m ...

  4. django url匹配过程

    ROOT_URLCONF root URLconf module urlpatterns “include” other URLconf modules chops off whatever part ...

  5. HNOI2017

    本蒟蒻表示终于把$HNOI2017$全AC了... 万岁! 附上各个题的题解: $DAY1$: $T1$: BZOJ4825: [Hnoi2017]单旋 $T2$: BZOJ4826: [Hnoi20 ...

  6. Gin Web框架简单介绍

    翻译自: https://github.com/gin-gonic/gin/blob/develop/README.md Gin Web框架 branch=master"> Gin是用 ...

  7. 【JAVA学习】struts2的action中使用session的方法

    尊重版权:http://hi.baidu.com/dillisbest/item/0bdc35c0b477b853ad00efac 在Struts2里,假设须要在Action中使用session.能够 ...

  8. Android LinearLayout线性布局

    LinearLayout是线性布局控件:要么横向排布,要么竖向排布 决定性属性:必须有的! android:orientation:vertical (垂直方向) .horizontal(水平方向) ...

  9. 基于node开发的web应用，负载均衡的简单实践

    集群(cluster)是一组相互独立的.通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器. 负载均衡(Load Balance ...

  10. cdcqの省选膜你赛 题解

    题解: 第一题: 有一个很明显的性质:后面的修改不会对前面的询问做出影响,CDQ分治套上BIT即可. 第二题: 有一个类似于斜率的形式,分数规划套上树分治,码量稍大,细节稍多. 最后20W的点出题人原 ...