Нужна помощь в определении точной высоты, которую рассчитывает браузер с помощью JavaScript или JQuery - PullRequest
Новая
       21

Нужна помощь в определении точной высоты, которую рассчитывает браузер с помощью JavaScript или JQuery

0 голосов
/ 24 октября 2019

Я делаю некоторые вычисления, чтобы установить угловой край в div, и этот расчет требует знания точной высоты div. Я использую JQuery.outerHeight () (не заботится о марже), и он дает мне значение, отличное от того, что я вижу в консоли разработчика. Если я использую значение консоли разработчика, мое уравнение работает. Как получить совпадающие числа?

Даже страннее, при определенном проценте ширины числа совпадают, но я не могу сказать, что такое скороговорка, и удивляюсь, почему это должно иметь значение.

Я пытался использовать setTimeout, $ (window) .on ('load'), думая, что проблема в том, что высота вычисляется до того, как все загружено, но проблема сохраняется. 

<style>
.cont1 {
  width: 50%;
  margin-bottom: 20px;
}
.rampDk {
  width: 100%;
}
</style>

<div class="cont1">
  <div id="grad1" class="rampDk">
    <h1>Hard-stop gradient | Class: rampDk</h1>
    <p>Using this type of gradient, you can create an angled background without using a background image.</p>
    <p>Angle is 113&deg; and is dynamically calculated based on height of div</p>
  </div>
</div>

function round(value, precision) {
  var multiplier = Math.pow(10, precision || 0);
  return Math.round(value * multiplier) / multiplier;
}
function buildClass(el) {
  $('.'+el).each( function() {
    //determine the class to set color
    switch(el) {
      case 'rampLt':
        // light color
        var bgColor = '#00A1DF';
        break;
      case 'sharpLt':
        // light color
        var bgColor = '#00A1DF';
        break;
      case 'rampMed':
        // med color
        var bgColor = '#00769B';
        break;
      case 'sharpMed':
        // med color
        var bgColor = '#00769B';
        break;
      case 'rampDk':
        // dark color
        var bgColor = '#153445';
        break;
      case 'sharpDk':
        // dark color
        var bgColor = '#153445';
        break;
      default:
        // med color
        var bgColor = '#2D75A1';
        break;
    }
    var thisID = $(this).attr('id');
    var divHt = $(this).outerHeight();
    var divW = $(this).outerWidth();
    var padL = divHt / 2;
    var deg;
    var deg1 = round(((divHt*.38)/divW)*100,3);
    var deg2 = round((divHt / 35.059),3);
    if (deg1 < deg2) {
      deg = deg2;
      console.log('deg2 won');
    } else {
      deg = deg1;
      console.log('deg1 won');
    } 
    var style = 'background: linear-gradient(113deg, white 0%, white, '+deg+'%, '+bgColor+' '+deg+'%, '+bgColor+' 100%) !important; padding-left: '+padL+'px;'
    $(this).attr('style',style);
  });
}
$(window).on('load', function() {
  setTimeout(function () {
  if (jQuery.browser.mobile) { //not shown in this code, but can be seen on example URL
    // mobile
    buildClassM('rampLt');
    buildClassRevM('sharpLt');
    buildClassM('rampMed');
    buildClassRevM('sharpMed');
    buildClassM('rampDk');
    buildClassRevM('sharpDk');
  } else {
    // desktop
    buildClass('rampLt');
    buildClassRev('sharpLt');
    buildClass('rampMed');
    buildClassRev('sharpMed');
    buildClass('rampDk');
    buildClassRev('sharpDk');
  }
  }, 1);
});

Пример можно увидеть здесь: https://labs.manattweb.com/angles/ с верхним делителем.

Браузер (Chrome и Firefox) оба говорят, что высота равна 248, но вывод консоли показывает 200Измените ширину .cont1 div на 40%, и вы получите разницу в 12, но сделайте ее равной 45%, и две высоты совпадут.

Это сводит меня с ума, поэтому любая помощь или знание о том, почему двацифры будут отличаться, будет принята с благодарностью.

...