JS 清除DOM 中空白元素节点
2024-10-19 00:45:01
HTML中的空白节点会影响整体的HTML的版面排榜
例如:
制作百度首页时,两个input之间的空白节点将本来是要整合在一起的搜索栏硬是把按钮和搜索框分离出现好丑的间隙
这时我们就可以用js清除这个空白格
下面是HTML的代码
<form id="fm" name="f" action="post" >
<span class="search_box">
<input name="s_r" type="text" maxlength="255" class="s_r" id="s_r" >
<span class="search_box_btn"></span>
</span>
<span class="search_btn">
<input type="submit" name="search" id="search" class="s_btn" value="百度一下">
</span>
</form>
css代码
form{
position: relative;
} .search_box{
display: inline-block;
width: 539px;
height: 34px;
border: 1px solid #b6b6b6;
border-width: 1px;
border-style:solid ;
vertical-align: top;
border-color:#b8b8b8 transparent #ccc #b8b8b8;
position: relative; } .s_r{
width: 500px;
height: 22px;
font: 16px arial;
line-height: 22px;
margin: 6px 0 0 7px;
} .search_box_btn{
position: absolute;
width: 18px;
height: 16px;
background: #fff url(../image/search_box_btn.png) no-repeat;
top: 50%;
margin-top: -8px;
cursor: pointer; right: 11px;
}
.search_btn{
display: inline-block;
} .s_btn{
width: 100px;
height: 36px;
color: #fff;
border-bottom: 1px solid #2d78f4;
background: #3385ff;
}
js清除节点,为了重复利用,可以将它包装成一个函数:
function cleanWhitespace(element)
{
for(var i=0; i<element.childNodes.length; i++)
{
var node = element.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}
处理节点:在之后加个 cleanWhitespace(document.getElementById("fm")
问题就解决了,嘻嘻
最新文章
- 在win8.1中安装apache+php+mysql
- 常见数组&;字符串API及其应用场景总结
- LA 3211
- python--while循环
- InnoDB的约束机制
- Windows同时安装Python2、Python3兼容运行
- New FileReader上传图片
- ";机器人防火墙";:人机识别在应用安全及风控领域的一点实践
- JAVA面向对象-----多态
- WPFのDecorator 、Adorner和AdornerDecorator
- Python写代码的用法建议
- python项目实战三个小实例
- BZOJ3545&;3551[ONTAK2010]Peaks——kruskal重构树+主席树+dfs序+树上倍增
- ROSETTA使用技巧随笔--PyMOL实时观测ROSETTA模拟过程中的结构变化
- 洛谷P3313 [SDOI2014]旅行(树链剖分 动态开节点线段树)
- jQuery中attr和prop方法的区别说明
- iOS - UITextView实现placeHolder占位文字
- WCF的例子
- sql 中如何查询某一列的数据在另一个表中有没有?
- Hibernate初学
热门文章
- gulp插件实现压缩一个文件夹下不同目录下的js文件(支持es6)
- 移动web开发中input等输入框问题
- 解决 scapy “NameError: global name &#39;wrpcap&#39; is not defined” 错误
- loadrunner常用函数集锦
- 安装vue-cli-service和webpack
- Visual Studio 2017/2019 企业版 Enterprise 激活码
- CentOS7安装GUI图形界面
- LEETCODE 07 09
- ArcGIS JS API4 With VueJS集成开发
- Spark2.X管理与开发