<!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. 循序渐进学Python 1 安装与入门

    1 安装 2 使用 2.1 运行程序 3 艺搜参考 by 2013年10月16日 安装 Windows安装版,源码,帮助文档: 使用 打开开始菜单中的Python GUI启动Python解释器: 启动 ...

  2. 关于python webpy的request

    获取get值i = web.input()keyword = i.get('keyword') 判断get值是否存在if i.has_key('keyword')

  3. 【峰回路转】Excel技巧百例 08.计算两个日期的差值

    在Excel中假设高速计算两个日期之间的差? 比如A日期为:2012/3/12   B日期为:2015/7/29  那么这两个日期之间差几年,差几个月.差多少天? 我们使用DateDif 函数来处理. ...

  4. Android 事件分发机制 图解

    在Android 开发中事件分发是比较重要的,也是比较难理解的,之前看过这方面的东西,以为自己弄懂了,也就没太注意,最近面试呢,想着肯定要问到这一块的东西,回顾的时候发现又忘了,真是好记性不如烂笔头啊 ...

  5. apache功能优化

    隐藏Apache版本等敏感信息 $ grep Server /usr/local/httpd/conf/extra/httpd-default.conf|grep -v "#" 修 ...

  6. lodash (js实用工具库)

    是什么? 它提供了一整套函数式编程的实用功能, 并且支持模块化, 比underscore更优秀. 文档? http://lodashjs.com/docs/ 引用? <script src=&q ...

  7. Ubuntu下如何配置使终端透明

    今天学习了一招如何将Ubuntu下的终端背景颜色变得透明,感觉透明之后有好处,比如网上有些命令,可以直接覆盖原来的网页察看,然后敲击命令. 下面就来看看终端背景变透明前后的对比效果. 完全不透明,最大 ...

  8. crm高速开发之EntityCollection

    /* 创建者:菜刀居士的博客  * 创建日期:2014年07月07号  */ namespace Net.CRM.OrganizationService {     using System;     ...

  9. PAT 甲级 1128. N Queens Puzzle (20) 【STL】

    题目链接 https://www.patest.cn/contests/pat-a-practise/1128 思路 可以 对每一个皇后 都判断一下 它的 行,列 ,左右对角线上 有没有皇后 深搜解决 ...

  10. 提高iOS开发效率的第三方框架等--不断更新中。。。

    1. Mantle Mantle 让我们能简化 Cocoa 和 Cocoa Touch 应用的 model 层.简单点说,程序中经常要进行网络请求,请求到得一般是 json 字符串,我们一般会建一个 ...