首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

Javascript获取雷同CSS样式的元素

2012-07-15 
Javascript获取相同CSS样式的元素headmeta http-equivContent-Type contenttext/html charsetut

Javascript获取相同CSS样式的元素

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.red {background-color: #F00;height: 100px;width: 100px;}.green {background-color: #0F0;height: 100px;width: 100px;}</style></head><script language="javascript">function getElementsByClassName(n) {var classElements = [], allElements = document.getElementsByTagName('*');for ( var i = 0; i < allElements.length; i++) {if (allElements[i].className == n) {classElements[classElements.length] = allElements[i];}}return classElements;}function changeBlue() {var redClassElements = [];redClassElements = getElementsByClassName('red');for ( var i = 0; i < redClassElements.length; i++) {redClassElements[i].className = "green";alert(i);}}</script><body><div onclick="changeBlue()"></div><br /><div name="code"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>无标题文档</title><style type="text/css">.red {height: 100px;width: 100px;background-color: #F00;}</style></head><script language="javascript" src="jquery-1.2.6.min.js"></script><script language="javascript">function changeColor() {$(".red").css("background-color", "#0F0");}</script><body onclick="changeColor()"><div name="code"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.red {height: 100px;width: 100px;background-color: #F00;}.green {height: 100px;width: 100px;background-color: #0F0;display: none;}</style></head><script language="javascript" src="jquery-1.2.6.min.js"></script><script language="javascript">function changeTheRedColor() {$(".red").css("background-color", "#00F");}function showGreenDiv(objId) {var str = "#" + objIdalert(str);$(str).css("display", "block");}</script><body onclick="changeTheRedColor()"><div onclick="showGreenDiv('1g')"></div><br /><div onclick="showGreenDiv('2g')"></div><br /><div onclick="showGreenDiv('3g')"></div><br /><div id="1g"></div><br /><div id="2g"></div><br /><div id="3g"></div></body>

热点排行