複数のdivで機能することをどのようにリファクタリングするのですか？

画面の20％を超えている場合はdivを移動します。誰かがどのようにリファクタリング機能を知っていますか？ "isElementOverflowing（）"は複数のdiv（例えば3）で動作しますか？私はdivを取得するために "getElementById"と "querySelectorAll"を使用しましたが、私の関数では機能しません。複数の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で機能することをどのようにリファクタリングするのですか？

答えて

関連する問題