我想了解 HTML、JS 和 CSS 如何协同工作并相互引用。
我发现 HTML 可以通过 id 引用来引用 CSS。
例子:<div id="left-show"></div>
但是,如果有人能澄清以下内容,将不胜感激:
- 您将如何告诉您的 HTML 代码引用特定的 JS 函数。
- 在 JS 函数中,引用 CSS id 是一种好习惯吗?
- 如果一个 JS 函数和 CSS id 同名,会不会产生冲突?
我想了解 HTML、JS 和 CSS 如何协同工作并相互引用。
我发现 HTML 可以通过 id 引用来引用 CSS。
例子:<div id="left-show"></div>
但是,如果有人能澄清以下内容,将不胜感激:
您将如何告诉您的 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 匹配,则可能会出现一些问题。最好通过尽可能远离全局范围来避免这种情况(根据这个答案)。
您的问题对于在像 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之类的地方。