js实现元素添加样式

<!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){
this.className="red";
oImg[i].style.display="block";
}
else{
oA[i].className="blue";
oImg[i].style.display="none";
}
}
};
}
};
</script>
</body>
</html>

思路有些乱,望指教!

时间: 2024-11-13 08:41:45

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

js操作元素的样式

1.元素.style.属性='属性值' var div=document.getElementById('box') div.style.width='300px'; div.style.height='300px'; div.style.backgroundColor='red'; //css中有-的属性,在js中要改成驼峰命名法 2.div.style.属性     获取元素的样式 var div=document.getElementById('box') console.log(div.

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

今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_Add" class="btn btn-primary" onclick="AddAttachMent()">增加</button> <script type="text/javascript"> functio

给指定的元素添加样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.1.js" type="text/javascript"></script> <script type=&q

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

//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除样式 $("

原生js为元素添加事件

1.行间事件 onclick="函数名()"; <div id="div1" onmouseover="over('400px','400px','green')" onmouseout="over('200px','200px','red')" onclick="show()"></div> 2.js中加事件  设置函数,发生事件时才触发 匿名函数 obj.onmouseout=f

js为元素添加onclick事件

$("div.manu a:last").on('click',function(){ if (page == totalPage) { return; } page = page + 1; search(page); }); 通过on绑定click事件

用JS改变的元素CSS样式

CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000&qu

js兼容获取元素的样式

js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } 使用方法: 如需要获取id为Div1的left值,就可以写成: var oDiv = document.getElementById("div1"); getStyle(oDiv,"left"); 就可以获取到这个div的

js学习总结----设置元素的样式值setcss

在JS给元素设置样式属性值,我们只能通过curEle.style[attr] = value 这种方式给元素设置行内样式 下面封装一个给当前元素的某一个样式属性设置值的方法(增加在行内样式上的):setCss() function setCss(curEle,attr,value){ //在JS中设置float样式值也需要处理兼容 if(attr==="float"){ curEle["style"]["cssFloat"] = value; c