<!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. 简单且线程安全的两个单例模式java程序

    /***具体说明见 http://www.cnblogs.com/coffee/archive/2011/12/05/inside-java-singleton.html*/ package com. ...

  2. iOS 版本更新检查

    #pragma mark ---------------------------------- #pragma mark -- 检测版本更新 -(void)onCheckVersion { NSDic ...

  3. Objective-C: 字符串NSString与NSMutableString

    字符串算是OC中非常重要和常用的一部分内容,OC中的字符串与我之前在学习C,C++,Java中的字符串有一定的不同,它非常类似于C++中容器的概念,但用法却与之还是有很大的不同,也许是因为OC的语法就 ...

  4. oracle游标循环的嵌套

    完成批量修改user_tables中的所有表的栏位名(从MS SQL导入过来,发现大小写问题,造成很多麻烦) 存储过程见下: -- Created on 2012/3/14 by FREE decla ...

  5. Intellij IDEA 使用Spring-boot-devTools无效解决办法

    相信大部分使用Intellij的同学都会遇到这个问题,即使项目使用了spring-boot-devtools,修改了类或者html.js等,idea还是不会自动重启,非要手动去make一下或者重启, ...

  6. oracle新建数据库时怎么选择编码格式

    源地址:https://zhidao.baidu.com/question/2009631596107727508.html 启动database configuration assistant,创建 ...

  7. list,set,map,数组之间的相互转换详细解析

    1.list转setSet set = new HashSet(new ArrayList()); 2.set转listList list = new ArrayList(new HashSet()) ...

  8. Java中的匿名类

    我们知道接口一般用于定义一种规范或操作协议,然后子类实现接口的所有功能.如下面的简单代码: 定义IMessage接口 package org.lyk.entities; public interfac ...

  9. Java SE 第十六讲----面向对象特征之继承

    1.继承(inheritance):Java是单继承的,意味着一个类只能从另一个类继承(被继承的类叫做父类也叫[基类 baseclass]),继承的类叫做子类,java中的继承使用extends关键字 ...

  10. ibatis配置多表关联（一对一、一对多、多对多）

    iBatis的多表关联. ibatis的表关联,和数据库语句无关,是在程序中,把若干语句的结果关联到一起.这种关联形式,虽然在大数据量时是很奢侈的行为,但是看起来很干净,用起来也很方便. 这里用表lo ...