使用javascript处理内联块空间 [英] Handling inline-block spaces with javascript
问题描述
我们都知道inline-block元素之间的空白的老年龄问题。例如:
.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid#333;}
< div class =wrapper> < div>< / div> < div>< / div> < div>< / div> < div>< / div>< / div>
.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid#333;}
< div class =wrapper> < div> < / div>< div> < / div>< div> < / div>< div> < / div>< / div>
这是一个准备好的HTML JavaScript / jQuery,像添加脚本到第一个片段的行为像第二个?某些类型的 $('。wrapper')。minify();
function。
使用jQuery可以删除所有的文本节点 wrapper
的元素like
$('。wrapper')。contents .filter(function(){return this.nodeType == Node.TEXT_NODE;})remove();
.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid#333;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div class =wrapper> < div>< / div> < div>< / div> < div>< / div> < div>< / div>< / div>
We all know the ages old problem with white spaces between inline-block elements. For example:
.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
The best solution in my opinion is to remove any spaces between the elements:
.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}
<div class="wrapper">
<div>
</div><div>
</div><div>
</div><div>
</div>
</div>
Can we do this on a ready HTML with javascript/jQuery, like adding a script to the first snippet to behave like the second one? Some sort of a $('.wrapper').minify();
function.
EDIT
Someone suggested a possible duplicate with How to minify HTML with CSS and Javascript?. That question is about reducing page size by editing files on server side. Here I'm looking for a solution that minifies a specific element after the content is transferred, without editing the html files. The problem is not page size, but white spaces in an element.
Using jQuery you can remove all the textnodes which are children of the wrapper
element like
$('.wrapper').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE;
}).remove();
.wrapper div {
width: 100px;
height: 30px;
display: inline-block;
border: 1px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
这篇关于使用javascript处理内联块空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!