Question

I need to control a div s height to always appear in steps of 20. I have a repeating div background that is 20 pixels high and I want the div to always end in a correct way. I found what I think is the solution here: Set height of an element on multiples of a number?

但是,当我尝试时,我没有工作。我在座椅上开着新布局,可能犯了一个简单的错误。

在以下测试中,Im 认为 d升的高度总是出现在100px的步子里,但它没有工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://`enter code here`www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test jquery</title>
<script type="text/javascript" src="jquery.js"></script> 
<script language=”javascript”>
$(document).ready(function(){

    $( #testCol ).height(function(i, h) { return Math.ceil(h / 100) * 100; });

});
</script>

<style type="text/css">
    #testCol {
        width: 150px;
        background-color:#FFCC00;
    }
</style>
</head>

<body>

    <div id="testCol">df ds d sfdhs fdsf ds fhsdu ds iuhsdi fsdf dhsf sdiuh isdf iusd fiushd fiuds i uhsdiu isudf iusd fiusdh fiusd fih wtwpr wer rew</div>

</body>
</html>

Answer 1

从文字标签上删除“javascript”。这预示着手稿的浏览器。你们不需要这一指示,但如果你想要使用该指令,它应当:

<script type="text/javascript">

Answer 2

为了在20px的步行中设定四级高点,我将数值改为:

<script type="text/javascript">
$(document).ready(function(){

    $( #testCol ).height(function(i, h) { return Math.ceil(h / 20) * 20; });

});
</script>

Answer 3

Some neat maths for this is as follows, just set the roundTo variable to the number you wish to round to.

var height = parseInt($jQueryObj.height(), 10),
    roundTo = 20;

if (height && (height % roundTo !== 0))
{
    height = roundTo * Math.round(height / roundTo);
}

I have setup a demo fiddleof this in action here: http://jsfiddle.net/i_like_robots/uBcHh/

You may face issues with padding too so remember to add or subtract as necessary. You should probably set minHeight rather than height for safety. I would genuinely ask yourself or whoever asked for this feature if it is really necessary.

友情链接