Как реорганизовать мою функцию, чтобы она работала более чем на один div?

Я хочу, чтобы мои divs двигались, когда они были более широкими, чем 20% экрана. Кто-нибудь знает, как реорганизовать функцию ma «isElementOverflowing()», что она работает для нескольких div (например, 3)? Я использовал «getElementById» и «querySelectorAll» для получения div, но он не работает для моей функции.Как реорганизовать мою функцию, чтобы она работала более чем на один div?

Спасибо за помощь :)

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 

<div id="s1" style="width:20%; font-size:2000%" class="class">something1</div> 
<div id="s2" style="width:20%; font-size:2000%" class="class">something2</div> 
<div id="s3" style="width:20%; font-size:2000%" class="class">something3</div> 

<script type="text/javascript"> 

function isElementOverflowing(element) { 
var overflowX = element.offsetWidth < element.scrollWidth, 
overflowY = element.offsetHeight < element.scrollHeight; 

return (overflowX || overflowY); 
} 

function wrapContentsInMarquee(element) { 
var marquee = document.createElement('marquee'), 
contents = element.innerText; 

marquee.innerText = contents; 
marquee.behavior = "alternate"; 
element.innerHTML = ''; 
element.appendChild(marquee); 
} 

var element = document.getElementsByClassName("class"); 

if (isElementOverflowing(element)) { 
wrapContentsInMarquee(element); 
} 
</script> 
</body> 
</html>

источник

2017-02-21 wymyszony

Вы можете цикл по каждому из них я думаю:

function isElementOverflowing(element) { 
 
    var overflowX = element.offsetWidth < element.scrollWidth, 
 
    overflowY = element.offsetHeight < element.scrollHeight; 
 

 
    return (overflowX || overflowY); 
 
} 
 

 
function wrapContentsInMarquee(element) { 
 
    var marquee = document.createElement('marquee'), 
 
    contents = element.innerText; 
 

 
    marquee.innerText = contents; 
 
    marquee.behavior = "alternate"; 
 
    element.innerHTML = ''; 
 
    element.appendChild(marquee); 
 
} 
 

 
var elements = document.getElementsByClassName("class"); 
 

 
for (var i = 0; i < elements.length; i++) { 
 
    if (isElementOverflowing(elements[i])) { 
 
    wrapContentsInMarquee(elements[i]); 
 
    } 
 
}

<div id="s1" style="width:20%; font-size:2000%" class="class">something1</div> 
 
<div id="s2" style="width:20%; font-size:2000%" class="class">something2</div> 
 
<div id="s3" style="width:20%; font-size:2000%" class="class">something3</div>

источник

2017-02-21 20:02:53 AVAVT

Большое спасибо. Меня устраивает :) – wymyszony

getElementsByClassName возвращает массив объект, похожий на всех дочерних элементы, которые имеют все указанные имена классов. Подробнее here.
Итак, в вашей функции isElementOverflowing вы получаете элемент dom, а не массив из них. Затем вам нужно только повторить эти элементы.

elements.forEach(function(element) { 
    if (isElementOverflowing(element)) { 
    wrapContentsInMarquee(element); 
    } 
});

источник

2017-02-21 20:04:41

Как реорганизовать мою функцию, чтобы она работала более чем на один div?

ответ

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