Question

我一直在尝试使用Codepen，我希望将跨度的背景颜色更改为HTML的Name属性的值。

以下codepen演示了我到目前为止所处的位置：

<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检查给定name的{{1}}属性，以确定<span>的{{1}}应该是什么。

Answer 1

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

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

你的问题就在这一行

document.load(function changeBackground() {

浏览器不再支持

load或onload现在更改处理DOMContentLoaded事件（已更新pen）

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

Answer 3

尝试将此用于文档加载侦听器：

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";
  }
});

Answer 4

您尝试拨打load，但您正在寻找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';

根据Name属性的值更改背景颜色

4 个答案: