<!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. 深入理解Javascript

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 1.编写高质量JavaScript代码的基本要点 2.Javascript函数 ...

  2. Studio右键选项中没有Git？

    从Git clone一个Project并打开后,都会习惯性的像使用Eclipse一样,选中工程右键,选择Git的对应版本控制选项. 如下图,你只看到了svn. 如何配置才能在右键选项中看到Git呢,我 ...

  3. Session 与cookies 的区别

    两个都可以用来存私密的东西,同样也都有有效期的说法. 区别在于:session是放在服务器上的,过期与否取决于服务期的设定,cookie是存在客户端的,过去与否可以在cookie生成的时候设置进去. ...

  4. Python标准库08 多线程与同步 (threading包)

    Python主要通过标准库中的threading包来实现多线程.在当今网络时代,每个服务器都会接收到大量的请求.服务器可以利用多线程的方式来处理这些请求,以提高对网络端口的读写效率.Python是一种 ...

  5. oracle跟踪事件（dump）总结

    一.Oracle跟踪文件 Oracle跟踪文件分为三种类型,一种是后台报警日志文件,记录数据库在启动.关闭和运行期间后台进程的活动情况,如表空间创建.回滚段创建.某些alter命令.日志切换.错误消息 ...

  6. What is the difference between <%, <%=, <%# and -%> in ERB in Rails?

    http://stackoverflow.com/questions/998979/difference-between-and-in-rails/25617607#25617607 http://s ...

  7. DELPHI SOKET 编程（使用TServerSocket和TClientSocket） 转

    http://www.cnblogs.com/findumars/p/5272658.html   本文采用delphi7+TServerSocket+TClientSocket; 笔者在工作中遇到对 ...

  8. Net文章汇总帖

    DevExpress:Data Grid ExamplesHow to: Initialize Cells in Newly Created RowsHow to: Set a Cell Value ...

  9. 【原】rsync的详细参数

    rsync参数的具体解释如下: -v, --verbose 详细模式输出-q, --quiet 精简输出模式-c, --checksum 打开校验开关,强制对文件传输进行校验-a, --archive ...

  10. java cmd 命令

    java的Runtime.getRuntime().exec(commandStr)可以调用执行cmd指令. cmd /c dir 是执行完dir命令后关闭命令窗口. cmd /k dir 是执行完d ...