如何重構我的功能，它適用於多個div？

我希望我的div在寬度超過屏幕20％時移動。有誰知道如何重構馬函數「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？

回答

相關問題