用函数改变元素的属性 [英] Changing properties of element with function
问题描述
也许是一个愚蠢的问题（我对javascript不太熟悉），但是：
我想在鼠标悬停时更改段落或列表项的背景。
以下代码有效：
< p onMouseover =" this.style.backgroundColor =''yellow''"
onMouseout =" this.style.backgroundColor =''white''"> pp ppp< / p>
现在我想使用函数最小化编码bij。 />
我该怎么做？
建议表示赞赏。
-
Nico Schuyt
http://www.nicoschuyt.nl/
Maybe a stupid question (I''m not so familiar with javascript), but:
I want to change background of a paragraph or list item on mouseover. The
following code works:
<p onMouseover="this.style.backgroundColor=''yellow''"
onMouseout="this.style.backgroundColor=''white''">pp ppp</p>
Now I want to minimize the coding bij using a function.
How do I do that?
Suggestions are appreciated.
--
Nico Schuyt
http://www.nicoschuyt.nl/
推荐答案
Nico Schuyt写道：
Nico Schuyt wrote:
我想更改段落或列表项的背景鼠标移到。
以下代码有效：
< p onMouseover =" this.style.backgroundColor =''yellow''"
onMouseout =" this.style.backgroundColor =''white ''"> pp ppp< / p>
现在我想用函数最小化编码bij。
我该怎么做？
I want to change background of a paragraph or list item on mouseover. The
following code works:
<p onMouseover="this.style.backgroundColor=''yellow''"
onMouseout="this.style.backgroundColor=''white''">pp ppp</p>
Now I want to minimize the coding bij using a function.
How do I do that?
< html>
< head>
< title>我的剧本< / title>
< meta http-equiv =" Content-Type" content =" text / html;
charset = iso-8859-1">
< script type =" text / javascript">
函数fHighlight（obj）{
obj.style.backgroundColor =''yellow''" ;;
}
function fFade（obj）{
obj.style.backgroundColor =''white''" ;;
}
< / script>
< / head>
< body>
< p onmouseover =" fHighlight（这个）
onmouseout =" fFade（this）"> ppppp< / p>
< / body>
< / html>
PS尽管内在的事件处理程序不区分大小写：
< p onmouseover ...
< p onMouseover ...
< p onMouseOver ...
等
但是代码内事件处理程序需要所有小写字母：
.... < br $>
myObject.onmouseover = myFunction;
为避免将来可能产生混淆和拼写错误，您可能需要使用
所有小写字母到处。这不是任何形式的要求，只是
a卑微的建议。
<html>
<head>
<title>My script</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function fHighlight(obj) {
obj.style.backgroundColor=''yellow''";
}
function fFade(obj) {
obj.style.backgroundColor=''white''";
}
</script>
</head>
<body>
<p onmouseover="fHighlight(this)"
onmouseout="fFade(this)">ppppp</p>
</body>
</html>
P.S. Despite intrinsic event handlers are not case sensitive:
<p onmouseover...
<p onMouseover...
<p onMouseOver...
etc.
but in-code event handlers require all small letters:
....
myObject.onmouseover = myFunction;
To avoid possible confusion and typos in the future you may want to use
all small letters everywhere. It is not a requirement of any kind, just
a humble suggestion.
VK写道：
Nico Schuyt写道：
Nico Schuyt wrote:
我想更改鼠标悬停时段落或列表项的背景。
... bij使用函数。
I want to change background of a paragraph or list item on
mouseover.
... bij using a function.
< html>
< head>
< title>我的脚本< / title>
< meta http-equiv =" Content-Type" content =" text / html;
charset = iso-8859-1">
< script type =" text / javascript">
function fHighlight（obj）{
obj.style.backgroundColor =''yellow''" ;;
}
函数fFade（obj）{
obj.style.backgroundColor =''white''" ;;
}
< / script>
< / head>
< body>
<html>
<head>
<title>My script</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function fHighlight(obj) {
obj.style.backgroundColor=''yellow''";
}
function fFade(obj) {
obj.style.backgroundColor=''white''";
}
</script>
</head>
<body>
我删除了''"''在两个函数中都有效！
非常感谢!!
-
Nico Schuyt
http://www.nicoschuyt.nl/
Nico Schuyt写道：
Nico Schuyt wrote:
VK写道：
VK wrote:
Nico Schuyt写道：
Nico Schuyt wrote:
我想更改
mouseover上的段落或列表项的背景。
I want to change background of a paragraph or list item on
mouseover.
可能值得注意的是CSS 2（1998年成为推荐）
允许在任何元素上使用''hover''伪类，所以当有足够的浏览器时
支持它（即当IE终于支持它时你可以在没有任何脚本的情况下完成这个任务：
p：hover {background-color：＃ff0;}
[...]
-
Rob
Probably worth noting that CSS 2 (which became a recommendation in 1998)
allows the ''hover'' pseudo-class on any element, so when enough browsers
support it (i.e. when IE finally supports it) you can do this without
any script at all:
p:hover {background-color: #ff0;}
[...]
--
Rob
这篇关于用函数改变元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
