时间戳

首页 > 解决方案 > 如何在页面加载之前运行特定的 javascript 代码（首先）？

javascript - 如何在页面加载之前运行特定的 javascript 代码（首先）？

问题描述

我有一个 js 代码，可以将 margin-top 添加到具有特定类名的行（id=3 的页面）。我希望这段代码在页面加载之前运行，因为现在它会立即显示没有边距顶部的行，然后添加它。该行应显示已添加边距顶部。

我的网站在 wordpress 上，我在头上添加了 js 脚本。

我试过 window.onpaint = checkMargin(); 但它没有用。任何想法？

这是我的js代码

<script type="text/javascript">   

//sets margin-top in serv-col --- IF not mobile version
 function addServMargin() {
 containers = document.getElementsByClassName('serv-cont');
  titles = document.getElementsByClassName('serv-col-title');
  texts = document.getElementsByClassName('serv-col-text');
  links = document.getElementsByClassName('serv-col-link');

  col_pad = '0px';
  if ( window.innerHeight > 800) { col_pad = '8.3vh'; }

  for (var i = 0; i < titles.length; i++) { 
    title_height = titles[i].offsetHeight;
    text_height = texts[i].offsetHeight;
style = window.getComputedStyle(containers[i], '');
    cont_height = style.getPropertyValue('height');
    cont_padd = style.getPropertyValue('padding-top');
    links[i].style.marginTop = 'calc(' + cont_height + ' - ' + 
cont_padd + ' - ' + col_pad + ' - ' + title_height + 'px - 1.48vh - ' + 
text_height + 'px - 127px - 5vh)';
  }
}
function checkMargin() {
 if (document.getElementsByClassName('page-id-13')[0] && window.innerWidth > 900) { addServMargin(); }
}
window.onresize = checkMargin;

</script>

标签： javascriptwordpress

解决方案

我不认为让它先运行会解决任何问题。代码所做的第一件事是获取容器、标题、文本和链接……它通过搜索 DOM 来完成。然后它遍历titles数组并根据需要进行调整。如果脚本在任何渲染完成之前运行，则 DOM 元素将不存在。它 1) 将无法找到它们，并且 2) 无法遍历它们，因为数组将为空。

实际上，甚至在此之前，它会检查它正在寻找的元素是否存在以及屏幕大小。我认为让它看起来像事后调整的唯一方法是首先使用 CSS 和媒体大小来设置样式。

推荐阅读