<!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. 【虚拟机】WIN8.1系统虚拟机完全彻底删除

    一.首先删除注册表 用管理员身份打开CMD,输入F:\>VMware-workstation-full-12.5.5-5234757.exe/clean,根据自己的虚拟机安装文件的路径进行改变( ...

  2. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

  3. os引导程序boot从扇区拷贝os加载程序loader文件到内存（boot copy kernel to mem in the same method）

    [0]README 0.1) 本代码旨在演示 在boot 代码中,如何 通过 loader文件所在根目录条目 找出该文件的 在 软盘所有全局扇区号(簇号),并执行内存中的 loader 代码: 0.2 ...

  4. ASP.NET动态网站制作（8）-- JS（3）

    前言:JS的第三节课,这节课主要讲函数.对象及方法. 内容: 1.九九乘法表例子: HTML代码: <!DOCTYPE html> <html xmlns="http:// ...

  5. jquery 滚动效果插件

    1.css <style> .fl { float: left; } .slider0 img { display: block; width:100px; padding: 2px; } ...

  6. YII框架学习（一）

    1.安装: windows:将php命令所在的文件夹路径加入到环境变量中,通过cmd命令:进入yii框架中的framework目录,执行: php yiic webapp ../cms linux:类 ...

  7. ios -- 极光推送《3》 pod 方法

    iOS SDK 集成指南 SDK说明 适用版本 本文匹配的 SDK版本:r2.1.5 以后.查看最近更新了解最新的SDK更新情况.使用Xcode 6及以上版本可以使用新版Push SDK,Xcode ...

  8. python 基础 1.4 python运算符

    一. 布尔值: 1>True 2>False       二.关系运算符 “=” (a=b):把b的值赋给a.等号赋值   “==”(a==b): 判断a与b是否相等.返回Trule或Fl ...

  9. Darwin做直播时对ReflectorSession引用数的控制

    在之前的博客中,我们提到了如何用Darwin&live555实现直播过程,那么更进一步,当直播结束时,我们需要关闭所有正在收看的客户端,并且delete转发会话ReflectorSession ...

  10. t60替换alt,super,ctrl

    发现T60的左边在ctrl 与 alt 有个win 键,所以就进行了映射 网上有一个把alt->ctrl, super-> alt, ctrl->super的script, 见 ht ...