<!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. serv-u设置被动模式注意的问题

    1.在“本地服务器”->设置->高级里面把端口范围设置一下: 2.在防火墙的入站规则里设置一下上面的端口范围

  2. MySQL处理数据库和表的常用命令

    MySQL处理数据库和表的常用命令 [导读] 学习如何管理和导航MySQL数据库和表是要掌握的首要任务之一,下面的内容将主要对MySQL的数据库和表的一些常用命令进行总结,一些我们不得不掌握的命令,一 ...

  3. 修改Jenkins启动衍生进程的生命周期

    Jenkins+jmeter 多线程测试java接口时爆错,导致无法生成html报告. 先介绍下场景: 在Jenkins中新建了一个Job,假设你在一些列Build Step之前/之后,启动了一个进程 ...

  4. js替换字符串中全部“-”

    alert("2014-03-22".replace('-','')); alert("2014-03-22".replace(/-/g,'')); 第一个运行 ...

  5. MongoDB相关资料收集

    MongoDB 入门教程http://www.runoob.com/mongodb/mongodb-tutorial.html .net 驱动程序下载:http://mongodb.github.io ...

  6. 关于BEA-000402和BEA-000438

    OS:rh5 64位 JDK:1.5 64位 weblogic:9.2.3 jar 应用程序部署后,启动受管服务器报如下警告和错误: 这个问题导致系统性能下降,打开weblogic控制台各项功能和应用 ...

  7. android 资源文件

    系统文档:http://developer.android.com/guide/topics/resources/available-resources.html 1. 系统下资源文件夹的名字是固定的 ...

  8. PetaPoco.Core.ttinclude修改

    /// <summary> /// Adds the singular rule. /// </summary> /// <param name="rule&q ...

  9. 项目积累——Strus、Hibernate

    在Struts-config.xml中对ActionForm Bean的生命周期用scope进行定义,可用的选项有:pageContext(缺省).request(常用).session.applic ...

  10. HDU 4118 Holiday's Accommodation

    Holiday's Accommodation Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 200000/200000 K (Jav ...