Question

我想了解HTML，JS和CSS如何协同工作并相互引用。

我发现HTML可以通过id引用引用CSS 示例：<div id="left-show"></div>

但是，如果有人能澄清以下内容，我们将不胜感激：

您如何告诉您的HTML代码引用特定的JS函数。
在JS函数中，引用CSS id是一个好习惯吗？
如果JS函数和CSS id共享相同的名称，会产生冲突吗？

Answer 1

您如何告诉您的HTML代码引用特定的JS函数。

一般来说，你没有。

您包含一个脚本（带有<script>元素），可以访问您希望它与之交互的DOM的任何部分（通过浏览器可用于脚本的document对象）。

您可以使用the addEventListener method绑定一个函数，以便它能够响应事件（例如单击按钮）而运行。

在JS函数中，引用CSS id是一个好习惯吗？

没有CSS id这样的东西。 HTML具有多种用途的ID，包括与CSS ID选择器匹配，链接到URL末尾的片段标识符，并允许<label>使用{{1}引用其关联的表单控件} attribute。

如果您想访问特定元素，则HTML ID是识别它的好方法（通过the getElementById method）。

如果JS函数和CSS id共享相同的名称，那会产生冲突吗？

如果任何类型的JavaScript变量（包括函数）与HTML元素的ID匹配，则可能会出现一些问题。最好尽量远离全球范围（根据this answer）。

Answer 2

对于像SA这样简洁的Q＆amp; A网站的完整解释，您的问题有点深远。你真的需要阅读很多材料才能完全理解。

然而，一些简短的简化答案可以帮助您入门

1）HTML通过触发JavaScript功能的事件链接到JavaScript。这是一个HTML元素上非常简单的事件的示例，当您单击按钮时，该元素将在您的JavaScript中查找声明为function aJavaScriptFunction(){ }的函数。有不同的方法可以做到这一点和不同类型的事件，但这是一个很好的起点。

<input id="thebutton" type="button" value="A Button" onclick="aJavaScriptFunction();" />

2）这很大程度上取决于你想要做什么，但一般来说，通过他们的ID选择HTML DOM元素是一种有效的方法来选择它们来做些什么。所以这可能是我们在前面的例子中使用的JavaScript函数。

function aJavaScriptFunction()
{
    var aButtonElement = document.getElementById("thebutton"); // <-- It's not a "CSS id" as such, CSS can use the HTML id
    // .... some more javascript that uses aButtonElement like
    aButtonElement.style.borderColor = "red";
}

3）否.JavaScript和CSS并没有像你想象的那样直接重叠，当你开始时，把它们都想象为改变HTML。使用JavaScript可以做一些与CSS相同的事情，但通常它们会在不同的时间发生。这个CSS与之前的JavaScript没有冲突，尽管它们都做了类似的事情。

#thebutton { border-color: blue; }

以下是我将所有示例放在jsFiddle中，您可以在其中使用它们。

你最好去W3 Schools或Code Academy之类的地方。

HTML，JS和CSS如何协同工作

2 个答案: