案例：设置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. 【Luogu P4779】dijkstra算法的堆优化

    Luogu P4779 利用堆/优先队列快速取得权值最小的点. 在稠密图中的表现比SPFA要优秀. #include<iostream> #include<cstdio> #i ...

  2. Oracle 分区表管理之组合分区（分区索引失效与性能比较）

    整体结构如下: Oracle  分区表管理之组合分区(分区索引失效与性能比较) 虽然老早就使用了分区表,终于有时间写有关分区表的内容:不是所有的场景数据量变大需要用到分区表,一般单表数据超过2g可以考 ...

  3. 02_Pandas基本使用

    1.Pandas读取数据 一般错误 import pandas as pd pd.read_csv(r'D:\数据分析\02_Pandas\pandas\food_info.csv') out: -- ...

  4. 从零开始入门 K8s | 深入剖析 Linux 容器

    作者 | 唐华敏(华敏)  阿里云容器平台技术专家 本文整理自<CNCF x Alibaba 云原生技术公开课>第 15 讲. 关注"阿里巴巴云原生"公众号,回复关键词 ...

  5. php之自动加载（懒加载）

    有A类和B类,如果在A类实例化B类,最简单直接的方法就是在B中使用include require_once A的文件,但是这种方法显然是不友好的,在框架中叶不是这么做的,在框架中使用的是自动加载的机制 ...

  6. createTextNode

    createTextNode()方法将创建一个包含给定文本的新文本文档节点.这个方法的返回值是一个指向新建文本节点的引用指针: reference = document.createTextNode( ...

  7. Ubuntu&Mac下使用alias简化日常操作

    alias 在Linux系统中用来给指令起别名,用来简化很长的指令. 用法很简单: alias : 查看当前所有别名 alias tmstart = "$CATALINA_HOME/bin/ ...

  8. C# 轮流展示照片

    代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; u ...

  9. 生活小插曲（长篇连载，持续更新ing）^_^

    这个帖子,长期记录一些小小的生活插曲 在北京朋友开店了-关于同学开快餐店的故事.今天下午听说这个朋友在附近开了一个店,下午5点多吧,出门去他那里去了.走路过去的.在那里聊了将近一个小时吧.对最近我们自 ...

  10. css重置样式

    <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ...