把内联JavaScript放在头脑中

时间:2011-07-07 16:42:40

标签: javascript

以下代码有效:

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

</body>
</html>

但问题是你必须为所有img标签重复内联JavaScript。我试着把脚本放在头脑中无济于事:

<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("img");
  x.style.opacity=1; x.filters.alpha.opacity=100;
  }
</script>
</head>
<body>

<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

</body>
</html>

一切似乎都适合我,但它不起作用。

非常感谢您的帮助!

麦克

2 个答案:

答案 0 :(得分:4)

document.getElementsByTagName返回一个集合(很像一个数组),而不是一个HTMLElementNode。它的成员有一个style属性,但它没有自己的属性,你无法区分事件发生的元素与其他元素。

正确方向的一步是:

function makeSolid(element) {
  element.style.opacity=1; x.filters.alpha.opacity=100;
}

然后onmouseover="makeSolid(this)"

正确方向的另一个步骤是使用unobtrusive JavaScript并使用JS附加事件而不是使用内部事件属性。由于浏览器之间的差异,使用event handling library来消除差异是明智的。

由于这取决于JS,因此应该保留* initial *样式,直到确认JS为止。设置document.body.className = 'js'然后在每个CSS规则集中使用.js ...作为后代选择器是一种流行的方法。

由于这似乎只是表现性的,因此进一步改进将完全忘记JavaScript而只是使用CSS来实现:

img {
  opacity:0.4;
  filter:alpha(opacity=40);
}

img:hover {
  opacity:1;
  filter:alpha(opacity=100);
}

答案 1 :(得分:1)

使用this

将对元素的引用传递给函数
function getElements(x) {
   x.style.opacity=1; x.filters.alpha.opacity=100;
}

这样称呼:

onmouseover="getElements(this)"