<!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. vs中使用M_PI的问题及解决 角度转弧度&根据弧度计算圆周上点的坐标的方法

    M_PI 是一个宏定义,圆周率的定义           C/C++ code #define M_PI 3.14159265358979323846 此宏定义和编译器有关,TC中M_PI宏就定义在& ...

  2. ［Android基础］Android中使用HttpURLConnection

    HttpURLConnection继承了URLConnection,因此也能够向指定站点发送GET请求.POST请求.它在URLConnetion的基础上提供了例如以下便捷的方法. int getRe ...

  3. vs2013工程下的各个文件和文件夹的作用

    1 ipch文件夹 用来加速编译,里面存放的是precompiled headers,即预编译好了的头文件. 头文件也是需要编译的,比如需要处理#ifdef,需要替换宏以及需要include其它头文件 ...

  4. 全能，OnSize的使用，部分覆盖后重画，都没有问题

    import wx class View(wx.Panel): def __init__(self, parent): super(View, self).__init__(parent) self. ...

  5. java 核心技术卷一 知识点

    第九章 集合 1.Iterator和Iterable接口类,作用. 2.Collection接口类,作用. 3.Map接口类,作用.

  6. 我的Android进阶之旅------>Android使用AlarmManager全局定时器实现定时更换壁纸

    该DEMO将会通过AlarmManager来周期的调用ChangeService,从而让系统实现定时更换壁纸的功能. 更换壁纸的API为android.app.WallpaperManager,它提供 ...

  7. 流畅python学习笔记：第十七章：并发处理二

    本章讨论python3.2引入的concurrent.futures模块.future是中文名叫期物.期物是一种对象,表示异步执行的操作 在很多任务中,特别是处理网络I/O.需要使用并发,因为网络有很 ...

  8. TCP/IP协议之ARP寻址

    ARP协议: 前面讲了网络层的寻址是通过IP地址来做的.其实一个数据包寻址包含两个部分:1 IP寻址.2 ARP寻址. ARP寻址是用在数据链路层上的.我们上网的电脑都有网卡.那么在数据链路层的进行传 ...

  9. SETEVENT的使用

    来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686915(v=vs.85).aspx 昨天看到这个SetEvent的方法 ...

  10. 织梦CMS博客风格模板

    织梦CMS博客风格模板,织梦CMS,博客模板,CMS模板.程序模板. 模板地址:http://www.huiyi8.com/sc/7248.html