JS更变CSS标签style样式
代码如下：<body><spanstyle="color:#000;">A</span><spanstyle="color:#F0F">B</span><spanstyl...
代码如下：
<body>
<span style="color:#000;">A</span>
<span style="color:#F0F">B</span>
<span style="color: #0080FF">C</span>
</body>
我想在页面载入时，统一更改<span>标签内style="color:#000;"，就是统一为黑色。
不用id,使用document.getElementsByTagName（）
JS如何写？
研究而已，不考虑实际 展开
<body>
<span style="color:#000;">A</span>
<span style="color:#F0F">B</span>
<span style="color: #0080FF">C</span>
</body>
我想在页面载入时，统一更改<span>标签内style="color:#000;"，就是统一为黑色。
不用id,使用document.getElementsByTagName（）
JS如何写？
研究而已，不考虑实际 展开
展开全部
hover是鼠标滑过时改变样式，要实现点击改变的话可以用js或者jQuery来实现；假设点击时的样式表为a；那么给li绑定个点击事件，当li被点击时移除其他li的a样式，给当前被点击的加上a样式。大致思路就是这么的；就像这样 我点击的时候把li中的p标签的字体颜色改成红色的
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
/*按星期查询*/
.week { margin-top:16px}
.week a{ text-decoration:none; }
.week li:hover { color: #abc}
.f14_50_c3{ font:14px/40px "微软雅黑"; color:#333}
.f14_50_c3:hover{ color:#AE7629}
.f12_36_cl{ font:12px/22px "宋体"; color:#fff}
.a{color: red;}
</style>
<script>
$(function(){
$("#week ul a li").click(function(){
$("#week ul a li p").removeClass("a");
$(this).find("p").addClass("a");
});
});
function change(i){
}
</script>
</head>
<body>
<div class="week" id = "week">
<ul>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期一</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期二</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期三</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期四</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期五</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期六</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期日</p></li></a>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
/*按星期查询*/
.week { margin-top:16px}
.week a{ text-decoration:none; }
.week li:hover { color: #abc}
.f14_50_c3{ font:14px/40px "微软雅黑"; color:#333}
.f14_50_c3:hover{ color:#AE7629}
.f12_36_cl{ font:12px/22px "宋体"; color:#fff}
.a{color: red;}
</style>
<script>
$(function(){
$("#week ul a li").click(function(){
$("#week ul a li p").removeClass("a");
$(this).find("p").addClass("a");
});
});
function change(i){
}
</script>
</head>
<body>
<div class="week" id = "week">
<ul>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期一</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期二</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期三</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期四</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期五</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期六</p></li></a>
<a class="m"><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期日</p></li></a>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
window.onload = function(){
var oSpan = document.getElementsByTagName("span");
var olen = oSpan.length;
for(var i=0; i<olen; i++) {
oSpan[i].style.color = '#000';
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var oSpan = document.getElementsByTagName("span");
for(var i=0; i<oSpan.length; i++) {
oSpan[i].style.color = '#000';
}
追问
大神，如果把color换成word-break 是否适用呢？
我试了貌似有问题啊，哪里出错了？
就 如上：
A111111
B111111
统一替换word-break:normal
追答
oSpan[i].style.wordBreak = 'normal';
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
