4

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

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

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

  1. 您将如何告诉您的 HTML 代码引用特定的 JS 函数。
  2. 在 JS 函数中，引用 CSS id 是一种好习惯吗？
  3. 如果一个 JS 函数和 CSS id 同名，会不会产生冲突？
4

2 回答 2

7

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

一般来说，你不会。

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

您可以使用该addEventListener方法绑定一个函数，以便它响应事件（例如单击按钮）运行。

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

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

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

如果一个 JS 函数和 CSS id 同名，会不会产生冲突？

如果任何类型的 JavaScript 变量（包括函数）与 HTML 元素的 ID 匹配，则可能会出现一些问题。最好通过尽可能远离全局范围来避免这种情况（根据这个答案）。

于 2013-05-17T19:46:14.833 回答
0

您的问题对于在像 SA 这样的简明问答网站上进行全面解释来说有点深远。您确实需要阅读大量材料才能完全理解。

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

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之类的地方。

于 2013-05-17T19:53:53.780 回答