<!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. EasyUI-draggable

    draggable用来在界面上创建一个可以拖动的元素,既然是可以拖动的元素,那么它在拖动过程中会有下面的几个事件:onBeforeDrag.onStartDrag.onDrag.onStopDrag. ...

  2. 转-ListView的性能优化之convertView和viewHolder

    ListView的性能优化之convertView和viewHolder 2014-05-14 参考:http://www.cnblogs.com/xiaowenji/archive/2010/12/ ...

  3. [C语言]（二）01 获取Windows图形构件大小信息

    SYSMETS.c #include <windows.h> #include "SYSMETS.H"//自定义的单元,所以用"",不是用<& ...

  4. SyntaxError: Non-UTF-8 code starting with '\xba' in file 错误的解决方法！！

    第一次在Eclipse建立python工程,添加了自己新建的文件,写了一点代码,随后执行时候出现了错误,和昨天我在Visual Studio 2015里面一样,错误: SyntaxError: Non ...

  5. wcf使用task实现异步调用

    private async void btnGetEmployees_Click(object sender, RoutedEventArgs e) { txtInfo.Text = "Da ...

  6. quartz定时任务时间设置描述

    这些星号由左到右按顺序代表 : * * * * * * * 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 1 秒 是 0-59 , ...

  7. C++学习23 虚函数详解

    虚函数对于多态具有决定性的作用,有虚函数才能构成多态.上节的例子中,你可能还未发现虚函数的用途,不妨来看下面的代码. #include <iostream> using namespace ...

  8. ZOJ 3407 Doraemon's Cake Machine [数学]

    题意: 最多有2000组测试样例,每组样例代表n,m; n代表要把蛋糕平分的份数,m代表必须进行多少次操作. 一共有三种操作 1.竖切   经过蛋糕圆心,将蛋糕整个向下切. 2.横切   平行于蛋糕平 ...

  9. requestDisallowInterceptTouchEvent

    ViewPager来实现左右滑动切换tab,如果tab的某一项中嵌入了水平可滑动的View就会让你有些不爽,比如想滑动tab项中的可水平滑动的控件,却导致tab切换. 因为Android事件机制是从父 ...

  10. CInternetSession CHttpFile Post提交数据

    //给指定url发请求, 返回请求后的结果 string CAutoPatchDlg::SendURLPost(string strServerName, string strFormActionUr ...