Округление значений height (CSS, JQuery)

354

15 сентября 2017, 20:56

Есть таблица и в ней определена высота строк (например, в данной строке 19,5px; строки разные):

Можно ли средствами сss (jQuery) округлить значения до целого числа?

Answer 1

Ванильный JavaScript

document.querySelectorAll("*").forEach(function(item, index) { 
item.height = Math.ceil(parseInt(getComputedStyle(item).height)); 
}); 
alert(document.querySelector("div").height)

<div style="height:50.6px; background:red;"></div>

Jquery

$("*").each(function(){ 
this.height = Math.ceil(parseInt(getComputedStyle(this).height)); 
}); 
alert($("div").height());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div style="height:50.6px; background:red;"></div>

Answer 2

Для округления без jQuery используй Math.round.
jQuery сам округляет значения до целых пикселей.
Свойства clientWidth, offsetHeight и подобные возвращают округлённое значение.

А вообще с округлением надо быть осторожнее, так как из-за половинки пикселя текст может перенестись на другую строку: https://stackoverflow.com/q/40517229/4928642.

window.onload = function () { 
  function process(p) { 
    console.log(p.textContent) 
    console.log("  getComputedStyle: " + getComputedStyle(p).width); 
    console.log("  scrollWidth: " + p.scrollWidth); 
    console.log("  jQuery: " + $(p).width()); 
  } 
 
  process(document.querySelector("p")); 
  process(document.querySelector("p + p")); 
};

body { 
  font-family: 'Shrikhand', cursive; 
} 
 
p { 
  outline: 1px dotted red; 
  float: left; 
  margin: 0 1em 0 0; 
} 
 
.as-console-wrapper.as-console-wrapper { 
  max-height: 180px; 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="//fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet"> 
<p>How to get my size?</p> 
<p>How to get the size?</p>