javascript - 鼠标输入时更改类属性

Question

我在这个脚本上绞尽脑汁，因为我不明白为什么它不起作用，因为它应该非常简单，我只想显示和隐藏某个 div 或更改它的属性。

Javascript:

function show(x){
    var y = document.getElementByClassName(x);
    y.style.display= 'block';

}
function hide(x){
    var y = document.getElementByClassName(x);
    y.style.display = 'none';

}

HTML:

<a href='http://dreamspark.e-uvt.ro/dreamspark/'target='_blank'onmouseover='show('divdreamspark')'onmouseleave='hide('divdreamspark')'>

CSS:

.divdreamspark {
    display: none;
}

我不明白我做错了什么。

Answer 1

存在多个问题:

1. 您弄乱了标记中的单引号。
2. .getElementsByClassName 方法存在拼写错误，Element 部分中缺少 s。

<小时/>

更新标记:

<a href='http://dreamspark.e-uvt.ro/dreamspark/'target='_blank' 
   onmouseover='show("divdreamspark")' 
   onmouseleave='hide("divdreamspark")'>

更新js:

function show(x){
    var y = document.getElementsByClassName(x)[0]; // <---missing s in Element
    y.style.display= 'block';
}
function hide(x){
    var y = document.getElementsByClassName(x)[0]; // <---missing s in Element
    y.style.display = 'none';
}

如果元素是单个元素，则在选择器处添加后缀[0](尽管类选择器返回一个集合)。如果您正在处理多个元素，那么您必须使用循环来迭代并隐藏每个元素。

function show(x) {
  var y = document.getElementsByClassName(x);
  [].forEach.call(y, function(i, el) {
    el.style.display = 'block';
  });

}

function hide(x) {
  var y = document.getElementsByClassName(x);
  [].forEach.call(y, function(i, el) {
    el.style.display = 'none';
  });
}