item参数为要改变高度的dom,
maxHight参数为dom的最大高度,
speed参数为改变高度的速度
function addHeight(item,maxHight,speed){
var itemHeight =parseInt( item.style.height.replace(/[a-z]/gi,''));
if(itemHeight<=maxHight){
itemHeight = itemHeight + 1(每次增加改变像素的值);
item.style.height= itemHeight+"px";
setTimeout(function(){addHeight(item);},speed);
}
}
function subHeight(item){
var itemHeight =parseInt( item.style.height.replace(/[a-z]/gi,''));
if(itemHeight>=0{
itemHeight = itemHeight -1(每次减小像素的值);
item.style.height= itemHeight+"px";
setTimeout(function(){subHeight(item);},speed);
}

原生js动态改变dom高度的更多相关文章

  1. 解决js动态改变dom元素属性后页面及时渲染问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header ...

  2. js动态改变iframe的高度

    js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200"   ...

  3. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  4. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  5. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  6. 原生js动态添加style,添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  7. 原生js快速渲染dom节点

    function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_tem ...

  8. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

  9. js动态改变setInterval的时间

    <!DOCTYPE html> <html> <head> <!--meta name="viewport" content=" ...

随机推荐

  1. WinForm DataGridView看似刷新的问题

    昨天同事winform遇到一个问题, 窗体上有一个时间控件,和一堆文本,下拉控件,时间控件是每秒都在动态走的 窗体下发一个DataGridView 控件显示保存后的数据 保存的数据库是在另一台机器B上 ...

  2. jquery ajax 参数可以序列化

    <form> <input type="text" name="FirstName" value="Bill" /> ...

  3. VB.NET数据库编程基础教程

    关键词:作者罗姗   众所周知,VB.NET自身并不具备对数据库进行操作的功能,它对数据库的处理是通过.NET FrameWork SDK中面向数据库编程的类库和微软的MDAC来实现的.其中,ADO. ...

  4. json(转)

    转自:http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如何使用J ...

  5. javascript 验证身份证

    /*身份证号码检索*/ function cardCheck(cartNo) { if (cartNo.val() === "") { return false; } else i ...

  6. js实现表格

    主要方法如下,然后今天学到了js的几个函数知识点. 1.eval()函数: 定义和用法eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法eval(string) 其 ...

  7. HTML5 标签元素的一些注意事项

    不运行写结束标记的元素(但标签元素): area.base.br.col.command.embed.hr.img.input.keygen.link.meta.param.source.track. ...

  8. mysql函数操作(5)

    <?php try{ $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); }catc ...

  9. Ubuntu安装JDK(tar.gz)

    如果没有创建root用户: sudo passwd root 在oracle官网下载jdk(百度"JDK")的tar.gz包: jdk-7u55-linux-x64.gz 这是我下 ...

  10. 使用verilog实现4选1数据选择器的几种方法

    第一种方法module mux( d1, d2, d3, d4, se1, se2, dout ); input d1; input d2; input d3; input d4; input se1 ...