一.网页换肤,样式自备。
1.window.οnlοad=function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oLink = document.getElementById('link1');
//直接改变link的href属性。
oBtn1.οnclick=function(){
oLink.href="css1.css";
}
oBtn2.οnclick=function(){
oLink.href="css2.css";
}
}
二.鼠标移到头像上获取个人信息
1.封装getByClass方法
oPrent父元素的ID,oClass为要获取的类名
function getByClass(oPrent,oClass){
//获取父元素下所有的元素
var aEle = oPrent.getElementsByTagName('*');
var i = 0;
//定义一个空数组
var aResult = [];
for(i=0;i<aEle.length;i++)
{
//遍历所有的元素
if(aEle[i].className==oClass){
if(oClass=='photo_content')
{
//push()向数组末端添加一个元素
aResult.push(aEle[i].getElementsByTagName('img')[0])
}
else {
//push()向数组末端添加一个元素
aResult.push(aEle[i]);
}
}
}
return aResult;
}
window.οnlοad=function ()
{
//后去父元素ID
var oMessage = document.getElementById('message');
//通过getByClass方法获取所有类名为user_info元素。
var aUser_info = getByClass(oMessage,'user_info');
//通过getByClass方法获取所有类名为photo_content元素下的img元素。
var aImg = getByClass(oMessage,'photo_content');
//遍历aImg和aUser_info里所有的元素
for (var i = 0; i < aImg.length; i++) {
aImg[i].index = i;//设置当前元素下标、
//为当前元素添加鼠标移入事件
aImg[i].οnmοuseοver=function(){
//为当前元素设置display属性,显示当前样式
aUser_info[this.index].style.display='block';
}
aUser_info[i].index = i;//设置当前元素下标
//为当前元素设置display属性,显示当前样式
aUser_info[i].οnmοuseοver=function(){
aUser_info[this.index].style.display='block';
}
//为当前元素设置display属性,隐藏当前样式
aUser_info[i].onmouseout = function(){
aUser_info[this.index].style.display='none';
}
}
}
三.播放列表
<script type="text/javascript">
window.οnlοad=function(){
var oWrap = document.getElementById('wrap');
//获取父元素下第一个h2标签的元素
var oUp = oWrap.getElementsByTagName('h2')[0];
//获取父元素下第一个ul标签的元素
var oUl = oWrap.getElementsByTagName('ul')[0];
oWrap.οnclick=function(){
if (oUl.style.display=='none') {
oUl.style.display='block';
oUp.style.className='up';
}
else
{
oUp.style.className='down';
oUl.style.display='none';
}
}
}