案例：设置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. Selenium+Java（六）Selenium 强制等待、显式等待、隐实等待

    前言 在实际测试过程中,由于网速或性能方面的原因,打开相应的网页后或在网页上做了相应的操作,网页上的元素可能不会马上加载出来,这个时候需要在定位元素前等待一下,等元素加载出来后再进行定位,根据实际使用 ...

  2. python的Requests库的使用

    Requests模块: Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量 ...

  3. 记一次 Java 项目 CPU 占用久高不下故障处理

    事件背景 公司对接了新系统,代码变动很大,项目也很急,于是在上线之后 Zabbix 不时就告警,提示 CPU 使用过载,告警消息类似如下: 一开始以为是系统停机升级,所有人都等着使用系统,导致系统处理 ...

  4. js基础-函数-var和let的区别

    javaScript简介 javaScript历史 1995年,Netscape公司是凭借Navigator浏览器成为当时第一代互联网公司. 网景公司希望在HTML界面上加一点动态效果,于是叫Bren ...

  5. Scrapy 框架 (学习笔记-1)

    环境: 1.windows 10 2.Python 3.7 3.Scrapy 1.7.3 4.mysql 5.5.53 一.Scrapy 安装 1. Scrapy:是一套基于Twisted的一部处理框 ...

  6. 带着canvas去流浪系列之二 绘制折线图

    [摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  7. Cypher基本指令学习1

    1.查询节点 查询所有节点match (n) return n 查询带有标签的节点 match(movie:Flyer) return movie.name 查询关联节点(查询A导演的所有电影) ma ...

  8. 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  9. APP Distribution Guide 苹果官网

    https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduct ...

  10. Xcode中.a文件引起的错误

    一.     TARGETS -> Build Settings-> Search Paths下 1．  Library Search Paths 删除不存在的路径,保留.a文件的路径(此 ...