案例：设置div的宽度

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    div {

      width: 200px;

      height: 150px;

      background-color: pink;

      border-radius: 100px;

    }

  </style>

</head>

<body>

  <input type="button" value="变宽" id="btn" />

  <div id="dv"></div>

  <script src="common.js"></script>

  <script>

    my$("btn").onclick = function () {

      var width = 200;

      var timeId = setInterval(function () {

        width += 10;

        if (width == 800) {

          clearInterval(timeId);

        }

        my$("dv").style.width = width + "px";

      }, 100);

    };

  </script>

</body>

</html>

JS---案例：设置div的宽度的更多相关文章

  1. 如何设置div的宽度为100%-xx px？

    如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relativ ...

  2. Js 动态设置DIV日期信息

    HTML代码如下: <div  id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...

  3. js 动态设置 div 背景图片 并滚动显示

    var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/sty ...

  4. js怎样改变div的宽度

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

  5. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

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

  6. 第4天：JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

  7. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

  8. 微信小程序template富文本插件image宽度被js强制设置

    这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...

  9. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

随机推荐

  1. day 41 css固定位置 以及小米商城项目

    .如何让一个绝对定位的盒子居中 left:%; margin-left:- 宽度的一半 .固定定位 position: fixed; ()脱标 参考点:浏览器的左上角 作用:固定导航栏 返回顶部 小广 ...

  2. vue通过控制boolean值来决定是否添加class类名

    vue通过控制boolean值来决定是否添加class类名

  3. Slickflow.Graph 开源工作流引擎快速入门之四: 图形编码建模工具使用手册

    前言: 业务人员绘制流程时,通常使用图形GUI界面交互操作来完成,然而对于需要频繁操作或者管理较多流程的系统管理用户,就需要一款辅助工具,来帮助他们快速完成流程的创建和编辑更新.Slickflow.G ...

  4. Git实战指南----跟着haibiscuit学Git(第一篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...

  5. Android ListView的header footer设置visibility gone不起作用

    常用的ViewGroup,例如LinearLayout,在onMeasure方法内对每个child view执行measure前,会判断child view的visibility是否为gone.如果是 ...

  6. JavaScript如何创建一个对象

    我们可以利用JavaScript的语法特征,以类的思想来创建对象. 方法一:原始方法代码如下: <script> var obj = new Object(); obj.name = &q ...

  7. mysql那些事(6) WHERE条件 字符串的引号

    前言:所谓的坑,两个意思,一个是软件本身的bug,一个是使用者常犯的错误. phper在日常开发中经常和mysql打交道.特别是在没有分层的中小应用中,phper开发要关注sql语句的实现. 入正题, ...

  8. 关于javascript中=的返回值

    今天看了一段代码,大概是这样的: function test(){ a=4; b=5; return b=a; } test();//返回? 返回值是多少呢?运行结果是4 这可以理解为将a的值赋给b以 ...

  9. js中的Object.assign接受两个函数为参数的时候会发生什么？

    缘由 今天看到一段代码 return Object.assign(func1, func2); 心生疑惑,为什么 Object.assign 的参数可以是函数? 于是有了下面这一堆东西,其实都是老生常 ...

  10. 【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图【华为云技术分享】

    [摘要] 本节中,我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法.这次要抓取的目标是今日头条的街拍美图,抓取完成之后,将每组图片分文件夹下载到本地并保存下来. 1. 准备工作 在本节 ...