Javascript获取雷同CSS样式的元素
日期：2014-05-17 浏览次数：20588 次
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 class="red" onclick="changeBlue()"></div>
<br />
<div class="red"></div>
</body>
</html>
<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 class="red"></div>
<br />
<div class="red"></div>
<br />
<div class="red"></div>
</body><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 = "#" + objId
alert(str);
$(str).css("display", "block");
}
</script>
<body onclick="changeTheRedColor()">
<div class="red" onclick="showGreenDiv('1g')"></div>
<br />
<div class="red" onclick="showGreenDiv('2g')"></div>
<br />
<div class="red" onclick="showGreenDiv('3g')"></div>
<br />
<div class="green" id="1g"></div>
<br />
<div class="green" id="2g"></div>
<br />
<div class="green" id="3g"></div>
</body>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
