时间戳

首页 > 解决方案 > 将外部 javascript 转换为内联 html（货物）

javascript - 将外部 javascript 转换为内联 html（货物）

问题描述

我是 Javascript 的新手（就像全新的），并且在开发一个基本上会“擦除”鼠标悬停标签内的类的代码方面得到了一些帮助。我目前在外部使用<script defer src= "./script.js">. 我正在尝试在 Cargo Collective 中辅助实现这一点，根据我正在阅读的所有内容，我将不得不为此使用内联脚本。我什至不知道从哪里开始，但我确信这是网站上人们遇到的常见问题。这是我正在使用的所有 Javascript：

console.log('hello world!!')
var elements = document.querySelectorAll('g')
console.log(elements)

for (var i=0; i<elements.length; i++){
    elements[i].addEventListener("mouseover",function() {
        event.target.setAttribute('class', 'hide')
    })
}

标签： javascripthtmlinlineexternal

解决方案

你在正确的轨道上，运行下面的代码片段，看看我所做的调整。

//get an array of all elements with id="g"
var elements = document.querySelectorAll('#g')

for (var i=0; i<elements.length; i++){
    elements[i].addEventListener("mouseover",function() {
    //on mouseover remove className
        this.className = ""
    })
}
.someClass {
background: blue;
color: yellow;
}

.someClass2 {
background: yellow;
color: blue;
}
<p>Hover the divs below to remove their CSS class:</p>
<div id="g" class="someClass">im the g div</div>
<br>
<div id="g" class="someClass2">im the other g div</div>

如果您的代码位于名为的文件中script.js并且位于 HTML 所在的根目录中，则只需在结束</body>标记之前调用该脚本即可：

<script defer src= "./script.js">

或者，如果您想完全内联，您可以在 HTML 文档中调用整个函数，如下所示：

<script>
//get an array of all elements with id="g"
var elements = document.querySelectorAll('#g')

for (var i=0; i<elements.length; i++){
    elements[i].addEventListener("mouseover",function() {
    //on mouseover remove className
        this.className = ""
    })
}
</script>

不过，请确保将脚本放在结束</body>标记之前，以便在函数运行之前完全加载 DOM。

推荐阅读