2017-02-21 5 views
0

Я хочу, чтобы мои divs двигались, когда они были более широкими, чем 20% экрана. Я написал это (ниже), и я понятия не имею, что не так. Я попытался использовать «querySelectorAll» вместо «getElementByClassName», но он также не работает. «GetElementById» и «quertySelector» работают отлично, но только на первый DIV :(. Что можно написать на месте этих методов? Может быть, есть способ лучше? Пожалуйста, помогите мне, привет.Почему мой «getElementsByClassName» не работает?

<!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> 
<div id="s4" style="width:20%; font-size:2000%" class="class">something4</div> 
<div id="s5" style="width:20%; font-size:2000%" class="class">something5</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> 
+2

Из-за 's' в' getElementsByClassName': он возвращает список узлов *, * а не узел – trincot

+1

['getElementsByClassName'] (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) возвращает массив элементов, а не элемент singule. Если вы реорганизуете' isElementOverflowing' для обработки массива, это sho uld work. – Jason

+0

'getElementsByClassName' возвращает NodeList, который должен быть итерирован либо внутренним методом' .forEach() ', либо стандартным циклом' for', чтобы извлечь каждый элемент и получить его свойства (даже если найден только один элемент) – mhodges

ответ

-1

document.getElementsByClassName("class") возвращает массив (Edit: технически не на самом деле массив) элементов. Вам нужно пропустить их, чтобы обработать их элемент за элементом.

+2

На самом деле, он не возвращает массив, а коллекцию, которая несколько похожа на массив. – trincot

+0

@ trincot Интересно. Я всегда считал, что это массив. –

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