Javascript 通过JS更改HTML id_Javascript_Html_Css

Javascript 通过JS更改HTML id

javascript html css

Javascript 通过JS更改HTML id,javascript,html,css,Javascript,Html,Css,我有一个脚本，由“hello world”组成，“hello”和“world”是两种不同的CSS样式我想点击其中任何一个，他们会交换他们的风格。例如，我点击“hello”，它会将样式与“world”交换。下面是我的代码我没法把它换掉。我该如何纠正它 <html> <head> <style> #today{ font-weight: bold; color: red; } #normal{ font-weight: normal;

我有一个脚本，由“hello world”组成，“hello”和“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>


#今天{
字体大小：粗体；
颜色：红色；
}
#正常的{
字体大小：正常；
颜色：绿色；
}
old=“old”；
功能集（in）{
var e=document.getElementsByName（旧）；
对于（ii=0；ii您在这里有一些问题。首先，在onclick处理程序中，它必须是“javascript:set”，而不仅仅是“set”。其次，您有一个名为“in”的参数，它是一个javascript关键字。将它的所有引用更改为“inv”。如果您这样做，您的代码将正常工作。请尝试
除此之外，我建议您在Firefox中工作，并获取Firebug加载项，以便打开控制台。它将显示这些类型的错误。
您在这里遇到一些问题。首先，在onclick处理程序中，它必须是“javascript:set”，而不仅仅是“set”。其次，您有一个名为“in”的参数这是一个Javascript关键字。将它的所有引用更改为“inv”。如果您这样做，您的代码将正常工作。试试看
除此之外，我建议您在Firefox中工作，并获取Firebug加载项，以便打开控制台。它将向您显示这些类型的错误。
在任何时候，只有一个元素可以用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>


.今天{
字体大小：粗体；
颜色：红色；
}
.正常{
字体大小：正常；
颜色：绿色；
}
document.addEventListener（“DOMContentLoaded”，function（））{
var els=document.queryselectoral（'.normal，.today'）；
对于（变量i=0；i

当然，使用（）更容易编写：

$（函数（）{
$（'.normal，.today'）。单击（函数（）{
$（'.normal，.today'）。每个（函数（i，el）{
变量$el=$（el）；
如果（$el.hasClass（'today'））{
$el.removeClass（“今天”）；
$el.addClass（'normal'）；
}否则{
$el.removeClass（“正常”）；
$el.addClass（“今天”）；
}
});
});
});
任何时候，只有一个元素可以用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>


.今天{
字体大小：粗体；
颜色：红色；
}
.正常{
字体大小：正常；
颜色：绿色；
}
document.addEventListener（“DOMContentLoaded”，function（））{
var els=document.queryselectoral（'.normal，.today'）；
对于（变量i=0；i

当然，使用（）更容易编写：

$（函数（）{
$（'.normal，.today'）。单击（函数（）{
$（'.normal，.today'）。每个（函数（i，el）{
变量$el=$（el）；
如果（$el.hasClass（'today'））{
$el.removeClass（“今天”）；
$el.addClass（'normal'）；
}否则{
$el.removeClass（“正常”）；
$el.addClass（“今天”）；
}
});
});
});
但是，要想完成您想要的任务，您不应该交换ID。相反，您应该交换类。应该使用ID为给定的DOM元素建立一个永久标识。在纯Javascript中交换类有点棘手，但如果使用jQuery，则非常容易。然而，要完成您想要的任务，您不应该交换ID。相反您应该处理交换类的工作。应该使用ID为给定的DOM元素建立永久标识。交换类在纯Javascript中有点棘手，但如果使用jQuery，则非常容易。我不确定“名称”确实是
元素的有效属性。您可以使用非标准属性，它们通常可以工作，但有点可疑。我不确定“name”确实是
元素的有效属性。您可以使用非标准属性，它们通常会工作，甚至正常工作，但这有点可疑。您通常希望将所有JavaScript代码放在立即调用的函数表达式中：（函数（）{/*此处所有代码*/}）
要进入局部作用域，从而防止全局命名空间污染…@Šime Vidas在jQuery版本中已经这样做了，在常规JavaScript版本中也添加了这一点。感谢关于使用类的改进。通过类这似乎是一种更优雅的方法。您通常希望将所有JavaScript代码立即放入一个invo中ked函数表达式：（函数（）{/*此处所有代码*/}）；
要进入局部范围，从而防止全局命名空间污染…@Šime Vidas在jQuery版本中已经这样做了，在常规JavaScript版本中也添加了这一点。感谢关于使用类的改进。通过类，这似乎是一种更优雅的方法。