<!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. android的Environment类 Android存储访问及目录

    http://www.cnblogs.com/mengdd/p/3742623.html http://blog.csdn.net/barnett_zhubo/article/details/6832 ...

  2. CDH使用Solr实现HBase二级索引

      一.为什么要使用Solr做二级索引二.实时查询方案三.部署流程3.1 安装HBase.Solr3.2 增加HBase复制功能3.3创建相应的 SolrCloud 集合3.4 创建 Lily HBa ...

  3. C#操作XML方法：新增、修改和删除节点与属性

    一 前言 先来了解下操作XML所涉及到的几个类及之间的关系  如果大家发现少写了一些常用的方法,麻烦在评论中指出,我一定会补上的!谢谢大家 * 1 XMLElement 主要是针对节点的一些属性进行操 ...

  4. 创建laravel项目

    下载项目到本地 git clone https://github.com/251068550/LaraBlog.git compoer安装 cd LaraBlog composer install 如 ...

  5. mysql服务器启动问题

    The server quit without updating PID file (/usr/local/mysql/data/snsgou.pid);可能的情况是启动的用户不对,

  6. log4j 2 入门实例（3）

    继承机制 所有logger都继承自root logger. 可以认为名为log4j2learn.Hello的logger继承自名为log4j2learn的logger. log4j会先查找名称是&qu ...

  7. IOS 长姿势---双击Home键

    这不值得大惊小怪,因为按两次Home键后,苹果只是简单第提供了一个历史任务列表,而不是人们以为的当前任务列表——这在苹果网站上已经说得很清楚了.至于为什么苹果没有能力为用户提供一个“任务管理器”,我们 ...

  8. (KEILv5)使用matlab绘制从KEIL memory导出的内存数据

    使用matlab绘制从KEIL memory导出的内存数据 如标题,某些时候我们需要分析keil调试过程中的数据,比如从I2S.SPI.I2C或者UART获取到的波形数据,这些数据时数字流,通过逻辑分 ...

  9. C# 操作SQLServer SMO中遇到的几个问题

    业务需求:需要读取数据库中的所有库,得到库之后可以再做后续操作.(win 7  vs2010 sqlserver2008r2) 在读取数据库名的时候,就需要用到Microsoft.SqlServer. ...

  10. jQuery移动光标改变图像

    脚本代码移动光标改变图像是一款让你通过移动光标显示和调整多个图像或其他方法来触发. 代码:http://www.huiyi8.com/sc/10628.html