案例：设置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. Xftp工具连接 报错： 无法与 “ 目标IP ” 连接

    这里是OpenSSH升级导致 查看sshd_config [root@sdw1 glibc]# vim /etc/ssh/sshd_config 查找后进行修改 [root@sdw1 glibc]# ...

  2. Kotlin实战案例：带你实现RecyclerView分页查询功能（仿照主流电商APP，可切换列表和网格效果）

    随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Kotlin在各类编程语言中的排名比较靠后(据TIOBE发布了 19 年 8 月份的编程语言排行榜,Kot ...

  3. kube-apiserver 集群服务安装

    目录 创建 kube-apiserver 证书 生成证书和私钥 创建加密配置文件 创建审计策略文件 分发 kube-apiserver 二进制文件 创建后续访问 metrics-server 使用的证 ...

  4. sudo控制用户对系统命令的使用权限

    sudo控制用户对系统命令的使用权限 sudo相关概念 普通用户涉及到超级权限的运用,管理员如果想让该普通用户通过su来切换到root获得超级权限,就必须把root权限密码告诉用户.但是如果普通用户有 ...

  5. 单核苷酸多态性SNP(single nucleotide polymorphism)

    定义 主要指基因组水平上由单个核苷酸的变异所引起的 DNA 序列多态性. 在基因组水平上由单个核苷酸的变异所引起的DNA序列多态性.即:在不同个体的同一条染色体或同一位点的核苷酸序列中,绝大多数核苷酸 ...

  6. synchronized被这么问，谁能受得了

    synchronized是面试中经常会被问到的知识点,相关的问题点也很多,问题答案涉及的知识点也很多,有经验的面试官就会顺着你的答案不断追问一下,下面的对话场景就是相关面试题的连环炮. 面试官:说一下 ...

  7. jsp 实现修改和删除功能

    main.jsp   实现查询 在此界面快捷方式到修改界面 点击修改  会把数据传递到exit.jsp 修改   edit.jsp 前面数据: 数据库: /* Navicat Premium Data ...

  8. Jest测试框架入门

    近年来,随着前端工程化的发展,前端发生了翻天覆地的变化.jQuery已经慢慢淡出了我们的视野,React.Vue和anglur三驾马车急速驶来.从此,前端进入了数据驱动的时代,也有了清晰的模块化开发的 ...

  9. 2019-2020-11 20199304 《Linux内核原理与分析》 第十二周作业

    ShellShock攻击实验 一.实验简介 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发 二.预备知识 1.shells ...

  10. 微信小程序——详细讲解页面传值(多种方法)

    1.使用navigator的url带参传值 (1)在pageA页面有一个固定的值要传递到pageB页面,比如说一个固定的值user_id要传递给B <navigator url=".. ...