Передача элемента DOM функции javascript

-1

Я хочу запустить общую функцию javascript с элементом, иногда несколькими элементами в том же документе HTML. Мне кажется, что самый простой способ - вызвать функцию изнутри элемента DOM. Хорошо, вот в чем проблема. «this» относится к элементу окна, и я видел, как область действия работает для функций, использующих «это», но я не вижу, как получить «это», чтобы ссылаться на элемент.Передача элемента DOM функции javascript

Я мог бы сделать getElementById, но я хочу довольно общий javascript и не должен придумывать уникальные идентификаторы каждый раз, когда я хочу его использовать. 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. Это dh и ih, что мне нужно перейти к функции.

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

источник

2015-01-23 SaintCad

Это то, что идентификаторы для фактически. Чтобы использовать элементы в js-коде –

Я задал вопрос 3 раза, но не знаю, чего вы хотите достичь ... но я угадаю. Думаю, вы могли бы использовать onload = "" для запуска некоторых JS для каждого элемента, но это просто уродливо. Почему бы не использовать классы? – Tom

У вас есть jQuery на странице? – MaxZoom

Если вы не называя его от одного из элементов (т.е. с помощью обработчика событий), вы будете иметь, чтобы использовать селектор какой-то, либо идентификатор или класс, как вы подчеркнули, или имя или имя тега, если это может сработать, или некоторая комбинация. Где-то по пути это нужно будет уточнить. Несмотря на то, что вы не были заинтересованы в использовании класса, это, скорее всего, ваш лучший вариант, поэтому я выделил его в этом первом примере.

//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]); 
 
    } 
 
}

<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>

Вы можете видеть, хотя мое использование довольно зачаточном, я использовал getElementsByTagName, а также, позвонив из родительского элемента, кроме документа. Добавленные мной идентификаторы не используются для поиска чего-либо, я просто использую их, поэтому, когда я вхожу в консоль, вы можете видеть, какой элемент он на самом деле, так же, как и с моим ужасным неправильным использованием атрибута alt на изображениях ,

Если вы знаете, что ваши единственные элементы изображения на странице - это те, на которых вы действуете, тогда возможно, начиная с document.getElementsByTagName ('img') - это подход для вас, а затем получить div с. parentNode. Это устранит зависимость от классов, но если вы добавите другие теги img на страницу, вам понадобится какой-то способ идентифицировать их, независимо от того, когда вы хотите запустить свою функцию выравнивания против или нет. Теги img, к которым вы хотите получить доступ, имеют общего предка или родителя, которых нет в других тегах img. Я добавил еще один сниппет, который показывает это. И вы можете объединить эти два подхода с петлей гнезда, чтобы получить все теги img в нескольких div, которые, например, используют общий класс.

//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]); 
 
    } 
 
}

<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>

источник

2015-01-23 20:37:00 Mic

Точно, без разума читать это непростительный вопрос, поэтому он должен быть закрыт и не отвечать. Все ответы без дополнительной информации - чистая спекуляция;). – Teemu

Что я хочу сделать, это вертикально центрировать изображение в div.Да, я знаю, что могут быть способы выполнения этой конкретной задачи, но я хочу сделать это с помощью javascript. Я бы предпочел не использовать getElementById, потому что предположим, что у меня есть 20 изображений, которые я хочу использовать - для всех требуется уникальный идентификатор. Во время работы над этим проектом я понял, что не знаю, как получить «это», чтобы ссылаться на элемент, вызывающий вызов функции, который в этом случае является div, содержащим изображение. – SaintCad

Я не хочу, чтобы функция запускалась на событие. Он должен запускаться автоматически из HTML. – SaintCad

Передача элемента DOM функции javascript

ответ

Смежные вопросы