<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style>

#div1{width:400px;height:400px;background-color:blue;}

</style>

<body>

<div id='div1'>

</div>

<input type='button' value='big' onclick='big();' /><br/>

<input type='button' value='bigger' onclick='bigger();' />

<script>

function big(){

    var div1=document.getElementById('div1');

    div1.style.width=800;

}

function bigger(){

    var div1=document.getElementById('div1');

    div1.style.width=100;

var width=div1.style.width || div1.clientWidth || div1.offsetWidth || div1.scrollWidth;

/*实际用div1.offsetWidth就够了，上边的麻烦了*/
      alert(width);

} 

</script> 

</body>

 </html>

js怎样改变div的宽度的更多相关文章

  1. js innerHTML 改变div内容的方法

    永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢.改变文字inner ...

  2. 调用jquery的resize方法改变div的宽度和高度在IE中不变，在谷歌中可以正常显示

    1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); ...

  3. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  4. 解决js动态改变dom元素属性后页面及时渲染问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header ...

  5. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  6. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  7. jquery 拖动改变div大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. vue踩坑之路--点击按钮改变div样式

    有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...

  9. CSS如何让DIV的宽度随内容的变化

    [css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...

随机推荐

  1. LPC1768之中断

    一外中断:只有特定的4个外中断引脚, 1 在特定的引脚上,引脚功能要选对应的外中断功能 2设定的触发条件(高低电平.上升/下降沿) 3 NVIC设定,特定的通道. 二GPIO中断: 1只有GPIO0和 ...

  2. Python中在脚本中引用其他文件函数的方法

    在导入文件的时候,Python只搜索当前脚本所在的目录,加载(entry-point)入口脚本运行目录和sys.path中包含的路径例如包的安装地址.所以如果要在当前脚本引用其他文件,除了将文件放在和 ...

  3. (转)关于rdlc报表的数据源

      rdlc 报表字符类数据分为文本数据和表数据,区别就在于文本数据只有一个,表数据可以有多行,然而有很多数据只需要一个传入就可以比如打印某个用户的基本信息,很多信息都是唯一的,如果此时报表传入的数据 ...

  4. ruby1.8到2.1语法改变

    1定义hash的语法改变old_way = {:foo => "bar", :one => 1}new_way = {foo: "bar", one ...

  5. Wix安装包权限问题

    Wix在安装完成之后,如果遇到非管理员用户(域用户或Win7+系统,UAC权限问题等),修改配置文件(setting.ini)文件时,会遇到文件权限为只读,无法修改问题: 解决方案有两种: 首先添加U ...

  6. Servlet中的配置 web.xml

    url-pattern配置 可以为同一个Servlet配置多个url-pattern: <servlet> <servlet-name>DoGetPostDemo</se ...

  7. xargs -r

    -r  no-run-if-empty xargs大多数 Linux 命令都会产生输出:文件列表.字符串列表等.但如果要使用其他某个命令并将前一个命令的输出作为参数该怎么办?例如,file 命令显示文 ...

  8. webstrom配置node环境一张图片说明问题

  9. 转——Android应用开发性能优化完全分析

    [工匠若水 http://blog.csdn.net/yanbober 转载请注明出处.] 1 背景 其实有点不想写这篇文章的,但是又想写,有些矛盾.不想写的原因是随便上网一搜一堆关于性能的建议,感觉 ...

  10. MWC飞控增加声纳定高的方法

    MWC飞控增加声纳定高的方法 2015.12.17 更新:经过2个周末的上机测试,该算法效果很好,在低空超声锁高之后离地高度非常稳定,现在已经成功应用在低空航拍上了. 现状 MWC开源飞控已经很有点年 ...