<!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. javascript 倒计时获取验证码

    var wait=60;function reSendCode(id) { var obj = $("#"+id); if (wait == 0) { obj.attr(" ...

  2. ext DateTime.js在ie下显示不全

    问题: ext在使用DateTime.js的时候会出现在日期控件在ie下显示不完成.如图  少了底部的“今天按钮”. 解决方法: 在ext/ux/form/DateTime.js (我的是这个路径,根 ...

  3. VBA读取固定文件夹中txt内容

    Sub OneTxt() '打开一个txt文件 Dim Filename As Variant, extLine&, mArr() As String Dim i%, j%, txtpath ...

  4. 配置coffeeScript

    1.安装好node.js后 在系统环境变量自动会设置好: 我安装在D:\Program Files文件夹中   也安装好了npm(node packges manager)   2.系统会自动配置np ...

  5. "QQ尾巴病毒"核心技术的实现原理分析

    声明:本文旨在探讨技术,请读者不要使用文章中的方法进行任何破坏. 2003这一年里,QQ尾巴病毒可以算是风光了一阵子.它利用IE的邮件头漏洞在QQ上疯狂传播.中毒者在给别人发信息时,病毒会自动在信息文 ...

  6. HDU 5313 bitset优化背包

    题目大意: 添加尽可能少的边,最后使图形成二分图 一开始将图区分成一个个联通分量,根据二分图染色,计算出每个联通分量的黑色点和白色点的个数 希望添加的边最少,那么合并的时候,希望黑白块尽可能平均,这无 ...

  7. 父元素与子元素之间的margin-top问题(css hack)（转载）

    情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...

  8. Fragment 切换问题

    public void switchContent(Fragment fragment) { if(mContent != fragment) { mContent = fragment; mFrag ...

  9. Apache Qpid Python 1.35.0 发布

    Apache Qpid Python 1.35.0 发布了,Apache Qpid (Open Source AMQP Messaging) 是一个跨平台的企业通讯解决方案,实现了高级消息队列协议.提 ...

  10. java基础－008

     57.面向对象软件开发的优点 代码开发模块化,更易于维护 代码复用 增强代码的可靠性和灵活性 增强代码的可理解性 面向对象编程有很多重要的特性,比如:封装,继承,多态和抽象  58．封装 封装给对象 ...