"Focus" event on dynamic links
I want to apply a "focus" effect on every single link, its easy but isn't like the real css "focus":
var backgroundColor, color, links = container.getElementsByTagName ("a");
for (i = 0; i < links.length; i ++) {
links[i].onblur = function () {
this.style.backgroundColor = backgroundColor;
this.style.color = color;
}
links[i].onfocus = function () {
backgroundColor = document.defaultView.getComputedStyle (this, null).ge开发者_如何学编程tPropertyValue ("background-color");
color = document.defaultView.getComputedStyle (this, null).getPropertyValue ("color");
this.style.backgroundColor = "blue";
this.style.color = "white";
}
}
Lets add some more links dynamically and the effect won't apply to them, unlike the real css "focus":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
<script type = "text/javascript">
window.onload = function () {
var container = document.getElementsByTagName ("div")[0];
var i = 0;
container.innerHTML = "Focus on the links, you have 10 seconds, <b>" + i + "<b>";
for (i = 1; i <= 5; i ++) {
var a = document.createElement ("a");
a.innerHTML = i;
a.setAttribute ("href", "#");
container.appendChild (a);
}
i = 0;
var interval = window.setInterval (function () {
i ++;
if (i < 10) {
container.childNodes[1].innerHTML = i;
}
else {
window.clearInterval (interval);
container.innerHTML = "No more effects, different links";
for (i = 1; i <= 10; i ++) {
var a = document.createElement ("a");
a.innerHTML = i;
a.setAttribute ("href", "#");
container.appendChild (a);
}
}
}, 1000);
var backgroundColor, color, links = container.getElementsByTagName ("a");
for (i = 0; i < links.length; i ++) {
links[i].onblur = function () {
this.style.backgroundColor = backgroundColor;
this.style.color = color;
}
links[i].onfocus = function () {
backgroundColor = document.defaultView.getComputedStyle (this, null).getPropertyValue ("background-color");
color = document.defaultView.getComputedStyle (this, null).getPropertyValue ("color");
this.style.backgroundColor = "blue";
this.style.color = "white";
}
}
}
</script>
<style type = "text/css">
a {
border: 1px solid black;
display: block;
margin: 5px;
padding: 5px;
text-decoration: none;
}
*/
a:focus {
background-color: blue;
color: white;
}*/
</style>
<title>Olá</title>
</head>
<body><div></div></body>
</html>
What can I do to reverse it ?
Thanks
You can handle events on the <body> tag; they will bubble up and arrive there.
jQuery will do this for you with its live method.
加载中,请稍侯......
精彩评论