背景属性の値をName属性の値に変更する

Question

私はCodepenを試していますが、Spanの背景色をHTMLのName属性の値に変更したいと考えています。私はこれまで午前どこ

次Codepenは示しています。

私は間違っているつもりです

https://codepen.io/anon/pen/JOymve?editors=1010

<div class="card-body"> 
    <span id="community" class="card-community-tag" Name="test">Community 1</span> 
    <span class="card-community-tag">Community 2</span> 
</div> 

document.load(function changeBackground() { 
    var communityName = document.getElementById("community"); 
    if (communityName.getAttribute("Name") == "test") { 
     communityName.style.backgroundColor = "red"; 
    } 
}); 

？

最終的な目標は、JSがそのスパンの名前属性をチェックして、そのスパンの背景色を決定することです。

おかげで、代わりにdocument.load()の

トム

Answer 1

使用document.addEventListener('DOMContentLoaded', function() {})（MDN）：

document.addEventListener('DOMContentLoaded', function() { 
 
    var communityName = document.getElementById("community"); 
 
    if (communityName.getAttribute("Name") == "test") { 
 
     communityName.style.backgroundColor = "red"; 
 
    } 
 
});

<div class="card-body"> 
 
    <span id="community" class="card-community-tag" Name="test">Community 1</span> 
 
    <span class="card-community-tag">Community 2</span> 
 
</div>

Answer 2

あなたの問題は、このラインは

0123です

loadまたはonloadはもはや今ではDOMContentLoadedイベント（pen更新）あなたがloadを呼び出すしよう

document.addEventListener("DOMContentLoaded", function() { 

Answer 3

を扱う変更のブラウザでサポートされていませんが、あなたはonloadを探しています。

function changeBackground() { 
    var communityName = document.getElementById("community"); 
    if (communityName.getAttribute("Name") == "test") { 
    communityName.style.backgroundColor = "red"; 
    } 
} 

document.onload = changeBackground(); 

注：JS内のCSSを直接​​変更するよりも、CSSクラス名を変更する方が効果的です。

communityName.className += ' red'; 

Answer 4

ドキュメントの負荷リスナーのためにこれを使用してみてください：そう

document.addEventListener("DOMContentLoaded", function(event) { 
    // Do the business 
}); 

：あなたのコード実行

document.addEventListener("DOMContentLoaded", function(event) { 
    var communityName = document.getElementById("community"); 
    if (communityName.getAttribute("Name") == "test") { 
    communityName.style.backgroundColor = "red"; 
    } 
});