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

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