<!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. 将到来的战略转变：移动 Web 还是移动 Apps？

    目前来看,移动应用比移动网站的易用性更高,但变化即将发生,移动网站最终将优于Apps,成为更好的策略选择. 一家公司制定移动策略时,最重要的问题是:是否需要考虑为移动设备特别做点什么.一些公司永远都不 ...

  2. Unity3D研究院编辑器之脚本设置ToolBar及脚本设置顶视图

    Unity版本5.3.2 如下图所示,ToolBar就是Unity顶部的那一横条.这里的所有按钮一般情况下都得我们手动的用鼠标去点击.这篇文章我们说说如果自动操作它们 1.自动点击左边四个按钮 (拖动 ...

  3. 如何在linux下解压缩rar格式的文件压缩包

    ##########################################################如何在linux下解压缩rar格式的文件压缩包#date:2014年2月15日22: ...

  4. excel十几万行数据快速导入数据库研究（转，下面那个方法看看还是可以的）

    先贴原来的导入数据代码: 8 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "www.setting ...

  5. struts2 jsp提交日期类型转换及国际化实现

    概述:下面通过jsp提交输入注册信息信息,同时完成过程文件国家化问题演示说明.[注册日期转换用注解方式实现] 工程截图: 注册页面jsp文件: <%@ page language="j ...

  6. java中final与static的使用场景

    final Java关键词final有“无法改变”的含义,主要用于修饰非抽象类.方法或者变量.使用时注意: final类不能被继承,没有子类,final类中的方法默认是final的. final方法不 ...

  7. Vector 源码阅读

    Vector在功能上与ArrayList是类似的,实现的数据结构也是一样的.但Vector是线程安全的,ArrayList是线程不安全的.

  8. 关于调用notifyDataSetChanged刷新PullToRefreshListView列表无反应解决办法

    文章转载自:关于调用notifyDataSetChanged刷新PullToRefreshListView列表无反应解决办法 | TeachCourse

  9. php分10个不同等级压缩优化图片（PNG）

    今天找到一个php写的压缩图片程序,可以分10个等级(0-9)来压缩,0等级时压缩比率不是很大,图片不会失真:随着压缩等级不断增大,图片会变得越来越不清晰,通常压缩后图片大小可以减少到原来的50%,压 ...

  10. java实现二叉树的构建以及3种遍历方法（转）

    转 原地址:http://ocaicai.iteye.com/blog/1047397 大二下学期学习数据结构的时候用C介绍过二叉树,但是当时热衷于java就没有怎么鸟二叉树,但是对二叉树的构建及遍历 ...