Question

我知道如何将javascript直接放在元素中，例如：

<div onclick="this.style.opacity='0'">Some Text</div>

或者

<div onmouseover="this.style.opacity='0'">Some Text</div>

等

但是，我们不能在元素标记中使用javascript，而是通过将js代码放在<script>标记中来提供相同的操作。

Answer 1

使用

document.getElementById("id")

或者你可以在你的页面上包含jQuery，而且 lot 更简单。

$('#id').mouseenter(function(){
$('#id').css("opacity","0.1");
});

Fiddle

Answer 2

虽然我是learn javascript before jQuery的倡导者，但我会告诉您，使用图书馆通常可以帮助您保留javascript unobstrusive。

jQuery是最常用的JavaScript库之一。

结合您的两个示例将导致此代码：

$(function() {
    $('anyCssSelector').bind('click mouseover', function() {
        $(this).css('opacity', 0);
    });
});

实际上，如果你担心不引人注目的javascript，你不应该在javascript中设置元素的样式。相反，将类应用于“描述”它们的元素。作为一个例子，通过将不透明度设置为0，而不是“硬编码”隐藏元素“点击”的行为，更简洁的方法是添加一个描述它的类，例如“非活动”。然后在样式表中，声明“不活动”元素被不透明度隐藏。这将有助于：

http://jsfiddle.net/NrCqm/

<style>
div {
    border: 1px solid #444;
    margin: 5px;
}

.clickable {
    cursor: pointer;
    background: #66FF66;
}

.inactive {
    opacity: 0;
}
</style>

<div class="clickable">Foo bar</div>
<div class="clickable">Ponyo</div>
<div class="clickable">Hello</div>
<div>You can't touch this</div>
<div class="clickable">World</div>
<div class="clickable">Lorem Ipsum</div>

<script>
$(function() {
    $('.clickable').bind('click', function() {
        $(this).toggleClass('inactive');
    });
});
</script>

这样，如果明天你决定“非活动”元素应该是灰色的和斜体字体，而不是隐藏，你所要做的就是改变你的样式表，你不必乱用你的代码。（当然，这也意味着您可以将样式表提供给不希望看到任何代码的设计人员。）

见这里的变化： http://jsfiddle.net/NrCqm/1/

Answer 3

使用jquery，你可以做到

<div class="shouldchangeonclick">Some Text </div>
<script type="text/javascript">
$(document).ready(function() {
  $('.shouldchangeonclick').on('click', function () {
    this.style.opacity = '0';
    // or $(this).css('opacity', '0');
  });
});
</script>

当然你也可以在没有jquery的情况下完成它，但是不要忘记在dom准备好之后应该调用代码（document onload event）

document.getElementById('theid').addEventListener('click', function (el) {
  this.style.opacity = '0';
});

如何在<script>标记中包含JavaScript，而不是在元素标记</script>中

3 个答案: