js中控制css的问题

Question

在网页中定义了
#aaa a{width:75px;height:40px;background:url(pic.png);}【pic图片大小为75*80】我想在js中定义一个函数让#aaa a的背景变为pic.png的下面一部分function abc() {
  document.getElementById('aaa').getAttributeNode('a').style.backgroundPositionY="-40px";
}但这个函数不行~~~貌似document.getElementById('aaa').getAttributeNode('a')≠#aaa a希望求得正解，感激不尽！

Answer 1

var aa=document.getElementById("aaa").getElementsByTagName("a");
var len=aa.length;
for(var i=0;i<len;i++) {
aa[i].style.backgroundPositionY="-40px";
}

Answer 2

最好是写两个样式,然后改变样式的名称就可以了.#aaa a{width:75px;height:40px;}
#aaa b1{background:url(pic.png);} 
#aaa b2{background:url(pic.png) 0 -40px;} 

Answer 3

恩，这个方法可行，但有一个问题，就是我只要改a:link而不要改a全部~~~应该怎样写？

Answer 4

加个样式#aaa a.newStyle{width:75px;height:40px;background:url(pic.png);background-positionY:-40px} 然后：var aa=document.getElementById("aaa").getElementsByTagName("a");
var len=aa.length;
for(var i=0;i<len;i++) {
    aa[i].style.className="newStyle";
}

Answer 5

我的意思是这样的：如果在网页中定义了 
#aaa a{width:75px;height:40px;background:url(pic.png);}
#aaa a:hover{background-position:0 -80px;【pic图片大小增加为75*120】 在js中定义一个函数让#aaa a:link的背景变为pic.png的中间一部分 
function abc(){
var a=document.getElementById("aaa").getElementsByTagName("a");
a[0].style.backgroundPositionY="-40px";
}但这样的话，激活一次函数后，原来的a:hover中的background-position就失效了~~~所以我想在
var a=document.getElementById("aaa").getElementsByTagName("a");
a[0].style.backgroundPositionY="-40px";
只更改
a:link.style.backgroundPositionY="-40px";
能否做到呢？？？？？？？

Answer 6

getAttributeNode好像返回的是属性节点吧，当然不对了

Answer 7

#aaa a{width:75px;height:40px;background:url(pic.png) 0 -40px;} 
#aaa a:hover{background-position:0 -80px; 按你要的效果，直接在样式上面定位不就好了吗？