通过JS改变HTML id

Changing HTML id via JS

本文关键字：id HTML 改变 JS 通过      更新时间：2023-09-26

我有一个由"hello world"组成的脚本，其中"hello"answers"world"是两种不同的CSS样式。

我想点击他们中的任何一个，他们会交换他们的风格。例如，我点击"hello"，它会与"world"交换样式。以下是我的代码。

我不能让它交换。我该如何改正呢?

<html>
<head>
<style>
#today{
    font-weight: bold;
    color: red;
}
#normal{
    font-weight: normal;
    color: green;
}
</style>
<script>
    old="old";
        function set(in){
            var e = document.getElementsByName(old);
            for(ii=0;ii<e.length; ii++)
            {
                var obj = document.getElementsByName(old).item(ii);
                obj.id="normal";
            }
            old=in;
    var e = document.getElementsByName(old);
            for(ii=0;ii<e.length; ii++)
            {
                var obj = document.getElementsByName(old).item(ii);
                obj.id="today";
            }
        }
</script>
</head>
<body>
<table>
    <tr>
        <td id="normal" name="new" onclick="set('new')">Hello</td>
        <td id="today" name="old" onclick="set('old')">World</td>
    </tr>
</table>
</body>
</html>

在任何时候，只有一个元素可以用ID注释。因此，应该使用类而不是id来注释元素。此外，请确保包含doctype。

现场演示更正后的代码:

<!DOCTYPE html>
<html>
<head>
<style>
.today{
    font-weight: bold;
    color: red;
}
.normal{
    font-weight: normal;
    color: green;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var els = document.querySelectorAll('.normal,.today');
  for (var i = 0;i < els.length;i++) {
    els[i].addEventListener('click', function () {
      var els = document.querySelectorAll('.normal,.today');
      for (var i = 0;i < els.length;i++) {
        var currentClass = els[i].getAttribute('class');
        var newClass = currentClass == 'today' ? 'normal' : 'today';
        els[i].setAttribute('class', newClass);
      }
    }, false);
  }
}, false);
</script>
</head>
<body>
<table>
    <tr>
        <td class="normal">Hello</td>
        <td class="today">World</td>
    </tr>
</table>
</body>
</html>
当然，用jQuery编写更简单(demo): 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script>
$(function() {
  $('.normal,.today').click(function() {
    $('.normal,.today').each(function(i, el) {
      var $el = $(el);
      if ($el.hasClass('today')) {
        $el.removeClass('today');
        $el.addClass('normal');
      } else {
        $el.removeClass('normal');
        $el.addClass('today');
      }
    });
  });
});
</script>

这里有几个问题。首先，在你的onclick处理程序中，它必须是"javascript:set"而不仅仅是"set"。其次，您有一个名为"in"的参数，这是一个Javascript关键字。将它的所有引用更改为"inv"。如果你这样做了，你的代码就可以工作了。试试。

除此之外，我建议您在Firefox中工作，并获得Firebug插件，以便您可以打开控制台。它会显示这些类型的错误

相关文章：