`

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>
  • jq.rar (16.4 KB)
  • 下载次数: 0
分享到：
| Linux shell的变量功能
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript动态添加css样式和script标签

    JavaScript动态添加CSS样式和script标签的知识点涵盖了Web开发中的客户端脚本编程技术，允许开发者在运行时动态地操作和修改网页的样式和行为。以下是对给定文件中所提到知识点的详细解释： 1. 动态添加CSS样式 - ...

    手机Web页面CSS样式及JS进行PC远程调试【图文】

    远程调试是Web开发者在优化手机网页时的一项重要技能，它允许开发者在PC上实时查看和修改手机端的CSS样式和JavaScript代码，无需频繁地在设备之间切换刷新。本教程主要介绍两种远程调试方法：Firefox浏览器内置的...

    CSS样式命名的重要性

    例如，`.message-box`可以在JavaScript中通过`document.querySelector('.message-box')`轻松获取到对应的DOM元素。 #### 二、常见的命名策略 1. **BEM(Block Element Modifier)**：这是一种非常流行的命名方法，它...

    javascript为节点设置样式

    如果需要对多个节点进行相同的操作，可以使用`querySelectorAll`获取所有匹配的选择器的元素集合，然后遍历这个集合执行操作。例如，如果想改变所有类名为'item'的元素的背景色，可以这样做： ```javascript var ...

    JS获取CSS样式（style/getComputedStyle/currentStyle）

    对于JavaScript获取样式： 1. **`element.style`**：此属性返回一个CSS样式对象，仅包含元素的内嵌样式。如果元素没有内嵌样式，返回的是一个空对象。例如： ```javascript var tag = document.getElementById(...

    Javascript获取标签ID改变style属性的代码

    在探讨如何使用JavaScript获取标签ID并改变其style属性之前，我们需要了解几个关键的Web开发知识点，包括HTML元素的ID属性、JavaScript中的DOM操作以及CSS样式的应用方式。以下将详细阐述这些概念，并结合给定的代码...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    2、原生JavaScript获取域名主机 3、原生JavaScript清除空格 4、原生JavaScript替换全部 5、原生JavaScript转义html标签 6、原生JavaScript还原html标签 7、原生JavaScript时间日期格式转换 8、原生JavaScript判断...

    JavaScript如何获取一个元素的样式信息

    在JavaScript中，获取一个元素的样式信息是一项基本任务，这对于实现动态网页的交互性和自定义样式至关重要。在不同的浏览器环境中，获取元素样式的方法可能会有所不同，因此需要采用跨浏览器的方式来实现。下面将...

    获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    需要注意的是，`getComputedStyle`方法返回的是一个包含所有计算样式的CSS样式声明对象，因此获取的样式值是经过CSS层叠和继承规则处理后的最终结果。 不过，需要注意的是，`getComputedStyle`方法在Firefox早期...

    JavaScript 读取元素的CSS信息的代码

    在前端开发中，JavaScript 和 CSS 的交互是不可或缺的一部分，尤其是在动态修改页面样式或获取元素的视觉状态时。本文将详细探讨如何使用 JavaScript 读取 HTML 元素的 CSS 信息，特别关注 W3C 标准和 Internet ...

    javaScript、VBscript、CSS参考手册

    CSS通过选择器选择元素并应用样式，支持层叠、继承和优先级规则，提供了极大的灵活性。"css.chm"文件将涵盖CSS的基本选择器、盒模型、布局模式、响应式设计、过渡和动画等核心概念。 "下载说明.htm"文件可能包含了...

    五子棋（CSS + JavaScript + jQuery）

    在五子棋项目中，我们可以利用jQuery来绑定事件、获取元素和实现平滑的动画效果。例如，当用户点击棋盘时，jQuery可以轻松地找到对应的棋盘格并添加棋子的图片。 ```javascript $(document).ready(function() { $...

    原生js更改css样式的两种方式

    这种方法允许我们直接在JavaScript代码中设置元素的CSS样式。例如，假设我们有一个类名为`root`的`&lt;div&gt;`元素，我们可以获取这个元素并修改它的样式。以下是如何操作的： ```javascript var root = document....

    Javascript+css 实现网页换肤功能

    通过 JavaScript，我们可以获取用户的选择，然后更改 `&lt;link&gt;` 或 `&lt;style&gt;` 元素来引用不同的 CSS 文件。以下是一个简单的 JavaScript 示例： ```javascript function switchSkin(skin) { var cssLink = document...

    HTML5+CSS3图片选中列表选中

    - DOM操作：创建、修改和删除DOM元素，以及通过JavaScript改变CSS样式。 - 变量和数据类型：在JavaScript中正确使用变量存储和传递数据。 5. 响应式设计： - 使用媒体查询（`@media`）来根据屏幕尺寸应用不同的...

    Yahoo!网站性能最佳体验的34条黄金守则__JavaScript和CSS

    - **背景与意义**：CSS表达式允许在CSS中嵌入JavaScript代码，以动态更新样式属性。然而，这种方式存在性能问题，因为它可能在页面的每一次重绘时都被计算，导致不必要的计算负担。例如，使用CSS表达式改变背景色： ...

Magicbox
Global site tag (gtag.js) - Google Analytics