<!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. BZOJ3689 异或之

    我们需要知道一个事实,trie树上是可以要求第k大的! 我们每个节点记个size值然后像其他数据结构一样维护就可以了 然后我们再搞个priority_queue什么的就好了,注意每个值会出现两次只要记 ...

  2. [原创]VM虚拟机安装centos6.4详细图文教程

    1.启动虚拟机,新建虚拟机.   2.选择从镜像安装,选择centos6.4的路径. 3.设置用户名和密码.注:只能用小写字母. 4.选择安装路径. 5.配置磁盘大小. 6.准备创建. 如果需要自定义 ...

  3. linux shell 当前时间

    #!/bin/bashdatestr=`date --date='today' "+%Y-%m-%d %H:%M:%S"`echo $datestr

  4. bzoj 2440: [中山市选2011]完全平方数

    #include<cstdio> #include<iostream> #include<cstring> #include<cmath> #defin ...

  5. Android Webview 背景透明

    两个关键点: 1         fBarParams.format = PixelFormat.RGBA_8888; 2 mWebView.setBackgroundColor(Color.TRAN ...

  6. velocity插件 veloeclipse 支持eclipse4.4

    分享主页:http://pan.baidu.com/share/home?uk=2737650112#category/type=0 http://pan.baidu.com/s/12RSAy 感谢究 ...

  7. NOIP 2003解题报告

    第一题(神经网络): 题目大意,给出一些点,每个点都有2个值,c和u,给出一些有向边,权值为w.入度为0的点的c已知,其它点的c未知,每个入度不为0的点node的c等于sum(c[k]*w[k][no ...

  8. EditorLineEnds.ttr 错误问题

    安装 Windows Write Live,在线安装,会先安装一个什么补丁,中途提示失败. 运行Delphi2007,第一次成功,第二次就是 EditorLineEnds.ttr文件错误. http: ...

  9. Android ScrollView与ViewPager滑动冲突

    前段时间做项目碰到在ScrollView里添加ViewPager,但是发现ViewPager的左右滑动和ScrollView的滑动冲突了,解决这个问题的方法是重写ScrollView. 代码: pub ...

  10. 【转】Centos系统文件与用户权限分配详解ftp,nginx,php

    linux系统中权限是非常完善的一个功能了,我们如果设置不正确文件就无法使用了,像我们以一般情况需要把文件权限设置为777或644了,对于用户权 限就更加了,像素ftp,nginx,php这些我们都可 ...