Question

我想运行带有元素的通用javascript函数，有时在同一个HTML文档中运行多个元素。在我看来，最简单的方法是从DOM元素内部调用该函数。好的，这就是问题所在。 “this”指的是window元素，我已经看到范围如何使用“this”的函数，但是我没有看到如何让“this”引用一个元素。

我可以做getElementById，但我想要一个相当通用的javascript，而不是每次我想使用它时都不需要提供唯一的ID。 getElementsByClasses可能是一种解决方法，但似乎应该有一种更简单的方法来做到这一点，而不依赖于id或类。

HTML

</HEAD>

<BODY>
<div id="content">
  <div class="linksbox">
    <a href="https://www.corponline.org" target="_blank">
      <div class="linkicon">
        <img src="asislink.jpg">
      </div>
    </a>
    <div class="linkblurb">
        <h2>National</h2>
        <p>Description of link</p>
    </div>
    <script>valignimg();</script>
  </div>

</div>      <!-- End content -->
</BODY>
</HTML>

javascript。是的，我需要传递给函数。

function valignimg() {
  dh = /* div element */ 
  ih = /* image (child element) */ 
  topmargin = (dh.offsetHeight - ih.offsetHeight)/2;
  return topmargin;
}

Answer 1

如果你没有从其中一个元素（即通过事件处理程序）调用它，那么你将不得不使用某种类型的选择器，如突出显示的ID或类，或者名称或标记名称，如果它可以工作，或某种组合。在某个地方需要指定它。即使你不热衷于使用课程，这可能是你最好的选择，所以我在第一个例子中突出了它。

＆＃13;

//warning - this event isn't supported on some older browsers like IE8
document.addEventListener("DOMContentLoaded", function(event) { 
  valignAll();
});


function valignimg(dh) {
  //Only added the IDs for this purpose, not using them to select elements so there's no functional requirement for them.
  console.log(dh.id); 

  //This supposes that you know the image tag you want is always the first img element among dh's children.
  ih = dh.getElementsByTagName('img')[0];
  console.log(ih.alt);
  
  var topmargin = (dh.offsetHeight - ih.offsetHeight) / 2;
  console.log('dh.offsetHeight = ' + dh.offsetHeight);
  console.log('ih.offsetHeight = ' + ih.offsetHeight);
  console.log('topmargin = ' + topmargin);
  ih.style.marginTop = topmargin + "px";
  console.log('ih.style.marginTop = ' + ih.style.marginTop);
}


function valignAll(){
  var linkIcons = document.getElementsByClassName('linkicon');
  for(i = 0;i < linkIcons.length;i++){
    valignimg(linkIcons[i]);
  }
}

＆＃13;

<BODY>
  <div id="content">
    <div class="linksbox">
      <a href="https://www.corponline.org" target="_blank">
        <div id="icon1" class="linkicon">
          <img alt="img1" src="http://placehold.it/20x20">
        </div>
      </a>
      <div class="linkblurb">
        <h2>National</h2>
        <p>Description of link</p>
      </div>
      <a href="https://www.corponline.org" target="_blank">
        <div id="icon2" class="linkicon">
          <img alt="img2" src="http://placehold.it/21x20">
        </div>
      </a>
      <div class="linkblurb">
        <h2>National</h2>
        <p>Description of link</p>
      </div>
      <a href="https://www.corponline.org" target="_blank">
        <div id="icon3" class="linkicon">
          <img alt="img3" src="http://placehold.it/22x20">
        </div>
      </a>
      <div class="linkblurb">
        <h2>National</h2>
        <p>Description of link</p>
      </div>
    </div>

  </div>
  <!-- End content -->
</BODY>

＆＃13;

你可以看到，虽然我的用法非常简陋，但我也使用了getElementsByTagName，从除了document之外的父元素调用。我添加的ID不用于查找任何内容，我只是使用它们，这样当我登录到控制台时，您可以看到它实际上是哪个元素，就像我可怕的误用图像上的alt属性。

如果您知道页面上唯一的图片元素是您正在使用的图片元素，那么可能从document.getElementsByTagName（＆＃39; img＆＃39;）开始就是您的方法，然后使用.parentNode属性获取div。这将消除对类的依赖，但如果您向页面添加其他img标记，那么您需要某种方法从每个标识中识别它是否一旦您想要运行对齐函数。您要访问的img标记具有共同的祖先或父级，其他img标记没有。我在下面添加了另一个代码段，显示了这一点。例如，你可以将这两种方法与一个嵌套循环结合起来，以便在所有共享一个类的多个div中获取所有img标签。

＆＃13;

//warning - this event isn't supported on some older browsers like IE8
document.addEventListener("DOMContentLoaded", function(event) { 
  valignAll();
});


function valignimg(ih) {
  //Only added the IDs for this purpose, not using them to select elements so there's no functional requirement for them.
  console.log(ih.alt);

  //This supposes that you know the image tag you want is always the first img element among dh's children.
  dh = ih.parentNode;  
  console.log(dh.id); 
  
  var topmargin = (dh.offsetHeight - ih.offsetHeight) / 2;
  console.log('dh.offsetHeight = ' + dh.offsetHeight);
  console.log('ih.offsetHeight = ' + ih.offsetHeight);
  console.log('topmargin = ' + topmargin);
  ih.style.marginTop = topmargin + "px";
  console.log('ih.style.marginTop = ' + ih.style.marginTop);
}


function valignAll(){
  //if they're the only img tags on the page, 
  //document.getElementsByTagName('img'); will work fine.
  //lets assume they aren't.
  var images = document.getElementsByClassName('linksbox')[0].getElementsByTagName('img');
  //I can grab the comment parent/ancestor by whatever means available, and then grab just its decendants by tag name.
  alert(images);
  for(i = 0;i < images.length;i++){
    valignimg(images[i]);
  }
}

＆＃13;

<BODY>
  <div id="content">
    <img src="http://placehold.it/240x20">&lt;&lt; Some sort of header logo
    <div class="linksbox">
      <a href="https://www.corponline.org" target="_blank">
        <div id="icon1" class="linkicon">
          <img alt="img1" src="http://placehold.it/20x20">
        </div>
      </a>
      <div class="linkblurb">
        <h2>National</h2>
        <p>Description of link</p>
      </div>
      <a href="https://www.corponline.org" target="_blank">
        <div id="icon2" class="linkicon">
          <img alt="img2" src="http://placehold.it/21x20">
        </div>
      </a>
      <div class="linkblurb">
        <h2>National</h2>
        <p>Description of link</p>
      </div>
      <a href="https://www.corponline.org" target="_blank">
        <div id="icon3" class="linkicon">
          <img alt="img3" src="http://placehold.it/22x20">
        </div>
      </a>
      <div class="linkblurb">
        <h2>National</h2>
        <p>Description of link</p>
      </div>
    </div>

  </div>
  Sponsor Logos or Site Certs in the footer
  <img src="http://placehold.it/20x20"><img src="http://placehold.it/20x20"><img src="http://placehold.it/20x20">
  <!-- End content -->
</BODY>

＆＃13;

将DOM元素传递给javascript函数

1 个答案: