无法通过javascript函数更改css属性[重复]

Question

这只是一个简单的 javascript 代码，用于更改显示或背景，或者只是看看我是否可以使用 javascript 更改 css 属性。

这是基于一个例子。

但由于某种原因，我无法使用自己定义的js函数更改属性。

HTML 代码

<div id="question"> testting javascript</div>
<button onclick="close()">Close</button>

JS 代码

function close(){
    document.getElementById("question").style.display = "none";
    document.getElementById('question').style.backgroundColor = "#f3f3f3";
}

The JSfiddle

完整代码

<div id="question"> testting javascript</div>
<button onclick="close()">Close</button>
<script>
function close(){
    document.getElementById("question").style.display = "none";
    document.getElementById('question').style.backgroundColor = "#f3f3f3";
}
</script>

Answer 1

它可能因 2 个原因而无法工作：

1. JSFiddle 默认将所有 JavaScript 代码包装在一个匿名函数中，因此您的 close() 函数从不暴露于主作用域。
2. 您选择了名称close，这是用于关闭窗口的现有 JavaScript 方法：window.close。

下面的代码正在运行：

window.closeQuestion = function() {
  document.getElementById("question").style.display = "none";
  document.getElementById('question').style.backgroundColor = "#f3f3f3";
};

/*/ This is a way of having a full control over your JavaScript functions and events: /*/
document.getElementById('closeBtn').addEventListener('click', function() {
  closeQuestion();
});

#question {
  background : red;
}

<div id="question"> testting javascript</div>

<!-- This is lame: -->
<button onclick="closeQuestion()">Close</button>

<!-- This is better: -->
<button id="closeBtn">Close (better)</button>

无论如何，您都应该在 JavaScript 中处理事件。使用on* 属性是上个世纪。见addEventListener。