0
上の「フォーカス」イベント私はすべての単一のリンク、その簡単に「フォーカス」効果を適用したいが、実際のCSSのようにされていません「フォーカス」：ダイナミックリンク
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";
}
}
は、いくつかのより多くのリンクを追加できます動的かつ効果が彼らには適用されません、本当のCSSとは異なり、「フォーカス」：
<!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>
は、私はそれを逆に何ができますか？
おかげ