案例：设置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. CentOS 7 ETCD集群配置大全

    目录 前言 环境准备 安装 静态集群 配置 node01 配置文件 node02 配置文件 node03 配置文件 启动测试 查看集群状态 生成TLS证书 etcd证书创建 安装cfssl工具集 生成 ...

  2. Linux安装图像页面的命令

    在shell里输入: sudo apt-get install x-window-system-core #安装x-windows的基础 sudo apt-get install gdm #安装登录管 ...

  3. ant 自动化构建环境。

    ant  一个自动化构建的工具 可以帮你实现自动化打包和发布到web环境上. 项目目录如下: 项目一:common-framework 项目二:estun-platform-web 其中项目一是项目二 ...

  4. 洛谷上的C语言三连击。

    注意看题目,没有0,一直错. #include<stdio.h> int panduan1(int num1,int num2, int num3); int main(){ int i, ...

  5. ThinkPHP5——模型关联(一对一关联)

    定义 定义一对一关联使用了hasOne,hasOne方法的参数包括: hasOne('关联模型名','外键名','主键名',['模型别名定义'],'join类型'); 下面定义一个用户表,公司给每个用 ...

  6. 【Python还能干嘛】爬取微信好友头像完成马赛克拼图（千图成像）～

    马赛克拼图 何谓马赛克拼图(千图成像),简单来说就是将若干小图片平凑成为一张大图,如下图路飞一样,如果放大看你会发现里面都是一些海贼王里面的图片. Our Tragets 爬取所有微信好友的头像

  7. 如何彻底理解Java抽象类 为什么要用抽象类 什么情况下用抽象类

    如何彻底理解Java抽象类 为什么要用抽象类 什么情况下用抽象类 呐,到底什么是抽象类,有时明明一个普通类就可以解决了,为啥非得整个抽象类,装逼吗 我曾带着这样的疑惑,查了很多资料,看了很多源码,写了 ...

  8. Flask开发天气查询软件，带你掌握pipenv的使用与手机Termux下的部署

    关于pipenv 昨天介绍了pipenv这个相比于virtualenv更高端大气上档次的虚拟环境管理软件,但看了下流量貌似不是很受欢迎,也许是我介绍的不够好吧.那么今天就拿它做一个例子,开发一款天气预 ...

  9. plsql判断和循环

    if语句 语法1 如果条件成立,执行if和end if 之间的语句. if 条件表达式 then plsql语句; end if; 语法2 if 条件表达式 then 条件成立时执行的语句; else ...

  10. redis数据类型--set

    set是String的一个无序集合,最大存储量2^32-1(大概40多亿) 1.操作命令:(xxx可以是任意字符串) sadd xxx a b c d e (添加一个或多个) smembers xxx ...