javascript 往一个节点动态添加元素、内容并判断是否溢出，溢出则删除

最新推荐文章于 2024-07-22 01:07:19 发布

倒吃甘蔗

最新推荐文章于 2024-07-22 01:07:19 发布

阅读量2.6k

点赞数 4

分类专栏： web程序设计文章标签： javascript 动态添加元素判断溢出处理溢出 javascript操作html

本文链接：https://blog.csdn.net/qq_38190111/article/details/84962947

版权

web程序设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

添加元素简单：

    var left_div = document.getElementById("left_div");

    var para = document.createElement("p");
	var node = document.createTextNode("这是新段落");
	para.appendChild(node);
	left_div.appendChild(para);

就可以往一个id= "left_div" 的 div 添加一个 p 标签，还有一种方法是用字符串表示一个标签：

var div = document.createElement("p");
var p = "<p>this is a paragraph</p>";
div.innerHTML = p;
left_div.appendChild(div);

其中p 仅仅是一个字符串，但也可以给他加进我们临时加的div标签然后再appendChild 就进去了

好了重点是判断溢出和处理：

溢出判断有两种方式

1、块元素有一个 clientWidth、Height 和一个scrollWidth、scrollHeight 分别代表没有溢出时正常的宽度高度和 溢出时的块的宽度和高度，而如果我们想要添加的元素设置了 overflow:visiable 也就是溢出就显示 “滑条”，那么上述两个类型的值会相等，起不了比较的作用，所以下面判断是否溢出的函数这样写：

function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";
   //先让溢出效果为 hidden 这样才可以比较 clientHeight和scrollHeight

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;//不满返回false
}

其实动态添加的东西，width 也就是横向应该不会溢出，除非你动态设置了宽度。

就下来就试试看效果：

while(!checkOverflow(left_div)){
	id++;
	var para = document.createElement("p");
	para.setAttribute("id",id);
	var node = document.createTextNode("这是新段落这是新段落水电费水电费水电费水电费地方是的发生的水电费是多少大是大非多少分是的发生的是大发送到发送到撒旦法士大夫撒旦法师大士大夫撒旦法师打发斯蒂芬士大夫撒旦法师打法");
	para.appendChild(node);
	left_div.appendChild(para);
}

先不要管id ，这个while 就是添加满left_div 到溢出为止，我的web页面是这样的——

我的left_div 就是左边的第一页部分，我故意将文字边长是为了让大家看到，当一次性添加的内容很多时，会出现这种情况——下方内容被遮住了，（这里看不到，下面会有没有遮住的图的），即那个第一页被遮住了，所以它溢出，之后停止了，从id 可见总共添加了8个p标签

但是它已经溢出了呀，如上所说它遮住了“第一页”这个文字，这个按理说不能让他溢出了再停止，应该溢出之前就停止添加了。

思考一下

变个思路，溢出判断必须是溢出后才能判断，那么我们可以把最后一个添加的节点（标签）给他移除掉不就好了？

while(!checkOverflow(left_div)){
	id++;
	var para = document.createElement("p");
	para.setAttribute("id",id);
	var node = document.createTextNode("这是新段落落水电费水电费水电费水电费地方是的发生的水电费是多少大是大非多少分是的发生的是大发送到发送到撒旦法士大夫撒旦法师大士大夫撒旦法师打发斯蒂芬士大夫撒旦法师打法");
	para.appendChild(node);
	left_div.appendChild(para);
}
var lastNode = document.getElementById(id);
left_div.removeChild(lastNode);//因为是溢出后才停止的，所以添加id 移除最后一个加入的节点。

结果：