<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style>

.red{color:red;}

.blue{color:blue;}

#w a{display:block;}

.red img{display:block!important;}

#w a img{display:none;}

</style>

<body>

<div id="w">

    <a class="red" title="1">1<img src="" width="100" height="50" alt="1"></a>

    <a title="2">2<img src="" width="100" height="50" alt="2"></a>

    <a title="3">3<img src="" width="100" height="50" alt="3"></a>

    <a title="4">4<img src="" width="100" height="50" alt="4"></a>

</div>

<script>

window.onload=function(){

var oD=document.getElementById("w");

var oA=oD.getElementsByTagName("a");

var oImg=oD.getElementsByTagName("img");

for(var i=0;i<oA.length;i++){

oA[i].onclick=function(){
//onclick--onmouseover

for(var i=0;i<oA.length;i++){

if(this.title==oA[i].title){
//if(this==oA[i])
//this(当前点击)
//oA[i]循环中被选择

this.className="red";

oImg[i].style.display="block";

}

else{

oA[i].className="blue";

oImg[i].style.display="none";

}

}

};

}

};

</script>

</body>

</html>

类似：http://blog.163.com/fan_yishan/blog/static/4769221320141241517368/

思路有些乱，望指教！

js实现元素添加样式的更多相关文章

  1. js给元素添加样式[addClass][hasClass]

    function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.classNa ...

  2. JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  3. JQuery为元素添加样式

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  4. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  5. 通过js读取元素的样式

    /* * 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值 * 所以如果要获取除内联样式后的值,就不能通过这个获取 * alert(box ...

  6. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  7. Vue给元素添加样式

    Vue中使用样式 绑定css 数组 <style> .red{ color:red } .thin{ font-size:18px } </style> <h1 :cla ...

  8. jquery给元素添加样式表的方法

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  9. 原生JS给元素添加class属性

     有下面这三种简单语句. document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document ...

随机推荐

  1. BZOJ3695 滑行

    转化模型就变成几层折射率不同的玻璃光要怎么走才能从(0, 0)到(x, y) 我们发现第一次光线射出去的角度确定,之后光的行程是确定的 而且角度和最后到达y时的x成正相关,于是可以二分! 然后物理学学 ...

  2. 经典DP 二维换一维

    HDU 1024  Max Sum Plus Plus // dp[i][j] = max(dp[i][j-1], dp[i-1][t]) + num[j] // pre[j-1] 存放dp[i-1] ...

  3. 克隆机器后eth1变为eth0问题

    1. 清空该文件 2.进入网络配置文件把HADDR 和UUID注释掉,并重启 3.成功修改eth0 4. 4.可以结合这篇帖子来看   http://www.cnblogs.com/zydev/p/4 ...

  4. RemoveDPC

    HOOKSSDT中加入了DPC之后 要取消DPC 首先找到DPCHookSSDT.sys的基地址和大小 通过枚举所有DPC的地址  将在范围之内的DPC定时器全部移除 枚举DPC: WinXP: 1. ...

  5. lazyload 分页加载

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ echo $d['pic']; ?>" src=&qu ...

  6. 为ASP.NET MVC应用添加自定义路由

    这里,我们将学习如何给asp.net mvc应用添加自定义路由.用自定义路由来修改默认路由表. 对一些简单的asp.net mvc应用,默认的路由表就已经足够了.但是,当你需要创建特殊的路由时,就需要 ...

  7. C-指针与引用的区别

    1. 指针是一个变量,保存一个地址,指向内存中的一个单元.而引用是一个别名. int a = 1; int* p = &a; int b = 1; int& r = b; 2. 指针可 ...

  8. Linux Lab

    ssh vi /etc/apt/sources.list su ssh username@ipaddress eg : ssh root@172.16.247.143 实验一 fdisk /dev/s ...

  9. matlab：clear，close，clc

    clear 删除工作空间中的项目,释放系统内存 语法: clear clear name clear name1 name2 name3... clear global name clear -reg ...

  10. ODI 12.1.3发布，提升支持大数据的能力

    此次发布的ODI新版本,目的是更好的支持当前市场上的大数据平台. 大数据基因在不改变ODI工作效率的情况下,ODI增加了越来越多的数据源集成能力.ODI是在Oracle平台上标准的E-LT工具,事实上 ...