<!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. 16 redis之sentinel运维监控

    一:sentinel运维监控 Sentinel不断与master通信,获取master的slave信息. 监听master与slave的状态 如果某slave失效,直接通知master去除该slave ...

  2. Makefile浅尝

    [0]README makefile定义: 一个工程中的源文件不计其数,其按类型.功能.模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要一先编译,哪些文件需要后编译,哪 ...

  3. Windows/Linux 环境搭建Git服务器 + vs2012集成git

    1. 下载.安装Git 我的系统是Windows 7,需要安装Git for Windows. 下载地址: http://code.google.com/p/msysgit/downloads/lis ...

  4. 兔子的晚会 2016Vijos省选集训 day1

    兔子的晚会 (xor.c/pas/cpp)============================= 很久很久之前,兔子王国里居住着一群兔子.每到新年,兔子国王和他的守卫总是去现场参加晚会来欢庆新年. ...

  5. 【BZOJ3601】一个人的数论 高斯消元+莫比乌斯反演

    [BZOJ3601]一个人的数论 题解:本题的做法还是很神的~ 那么g(n)如何求呢?显然它的常数项=0,我们可以用待定系数法,将n=1...d+1的情况代入式子中解方程,有d+1个方程和d+1个未知 ...

  6. 【BZOJ4276】[ONTAK2015]Bajtman i Okrągły Robin 线段树优化建图+费用流

    [BZOJ4276][ONTAK2015]Bajtman i Okrągły Robin Description 有n个强盗,其中第i个强盗会在[a[i],a[i]+1],[a[i]+1,a[i]+2 ...

  7. href=http:// href=// 的区别，src=http:// src=// 的区别。 链接里不带http，链接里直接使用双斜线 // 有什么不同。http://和//有什么区别？

    其实很简单,当一个连接用双斜线 // 开头时表示如果浏览器当前使用的是https协议,那么就加载https协议的脚本,否则使用http,这保证了页面所有资源使用同一协议. 其实是有人将其做为规范来实践 ...

  8. opencv常用类总结

    1 Rect_ (const Point_< _Tp > &pt1, const Point_< _Tp > &pt2),Rect的这种两个点的构造函数的两个点 ...

  9. 为什么需要onRoute函数?

    为什么需要onRoute函数? · Tencent/wepy Wiki https://github.com/Tencent/wepy/wiki/%E4%B8%BA%E4%BB%80%E4%B9%88 ...

  10. AsyncTask==Handler+Thread对比使用说明

    AsyncTask能够合理且轻松使用UI线程,该类允许执行后台操作和发送结果到UI线程而不需要操作threads或handlers. AsyncTask是针对Thread和Handler代替而封装好的 ...