点击p标签切换颜色

最新推荐文章于 2024-07-14 00:59:35 发布
最新推荐文章于 2024-07-14 00:59:35 发布
阅读量1.2k 收藏
点赞数
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Da6668_lei/article/details/106167607
版权

点击p标签切换颜色

设置2n+1为红色，2n+2为蓝色

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p >1</p>
		<p >2</p>
		<p >3</p>
		<p >4</p>
		<p >5</p>
		<p >6</p>
		<p >7</p>
		<p >8</p>
		<p >9</p>
		<p >10</p>
		<p >11</p>
		<p >12</p>
		<p >13</p>
	
		<script type="text/javascript" >
		var ptag = document.querySelectorAll("p");
			for(let i=0;i<ptag.length;i++) {
			//数值越界，2*i+3>ptag.length 所以报错 所以
					if(2*i+1>=ptag.length-1) {
						break;
					}
				ptag[2*i+1].style.color = "blue";
				ptag[2*i+2].style.color = "red";		
			}
			ptag.forEach((el)=>{//遍历元素，传参el进去，el代表p标签
				el.onclick=function() {//添加点击事件
					//console.log(this)//this表示被点击的事件
					if(this.style.color == "blue") {
						this.style.color = "red";
					}else{
						this.style.color = "blue"
					}
				}
			})
		</script>
</html>
Da6668_lei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击当前的p标签,弹出相对应的元素下标 (点击第一个p元素,弹出0,点击第二个p元素,弹出1........)
qq_45747891的博客
10-27 304
点击当前的p标签,弹出相对应的元素下标 (点击第一个p元素,弹出0,点击第二个p元素,弹出1…) 效果图 代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type=...
Vue实现导航栏点击当前标签变色功能
12-29
本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码，供大家参考，具体内容如下 1.效果 2.所有代码 <p>{{item.time}}</p> <p>{{item.start
利用闭包，实现点击＜p＞时，被点击的p的背景色变为#eee。
weixin_42864357的博客
03-24 132
【代码】利用闭包，实现点击时，被点击的p的背景色变为#eee。
＜p＞ 标签中的文字颜色
最新发布
flamesfather的博客
07-14 305
html
html中p标签怎么改变颜色6,p标签-HTML5精讲 课时ID:6.6 【表严肃】#HTML教程 #HTML5教程 #<p>标签...
weixin_33498603的博客
06-17 433
6.6 标签-HTML5精讲 课时ID:6.6 【表严肃】#HTML教程 #HTML5教程 #p标签是什么是段落标签(paragraph的缩写)，用于给文字划分段落，一组元素为一个段落怎么用比如一篇文章，如果需要三个段落可以这样写：很久以前，那还是我用win98的时候有次我系统崩溃了，因为我是电脑白痴，我朋友给我介绍了一个高手来帮我修电脑。他看了一下电脑，问我有没有98的盘，我说没有。他想了一下，...
点击按钮改变＜p＞样式
qq_45772415的博客
07-15 308
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击按钮改变样式</title> </head> <body> <h1 id="id1">我想要变色qwq</h1> <button type="button" onclick="document.getElementById('id1').style.color
JS实现切换标签页效果实例代码
10-26
每个标签页标题都是一个`<p>`元素，并使用`class="topC0"`，而当前选中的标签页则使用`class="topC1"`，并改变其背景色和文字颜色。 为了实现切换效果，我们需要在JavaScript中编写代码来响应用户的点击事件。这里...
css配合JavaScript实现tab标签切换效果
10-17
首先，我们需要理解Tab标签切换的基本原理：用户点击不同的Tab标签时，相应的内容区域会显示或隐藏。 **HTML结构** HTML部分定义了两个主要的部分：`#tab` 用于存放Tab标签，`#contents` 用于存放各个模块的内容。...
html 点击按钮 实现页面内容地的隐藏与切换
08-11
这部分代码利用jQuery框架实现了按钮点击时的内容切换功能： ```javascript $(function() { $('.shop_clickli').click(function() { $(this).addClass('red').siblings().removeClass('red'); // 找到“red”类，...
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
10-15
当点击某个li元素时，它的字体颜色会变为红色。 首先，让我们分析代码： ```html v-for="(item, index) in lists" @click="clickAdd(index)" :key="index" :class="{red: i === index}"> <div>{{item...
html p标签颜色代码,html里的颜色标签肿么写?
weixin_30002151的博客
06-09 4225
第一种：内嵌样式改变p标签内字体颜色.(p标签可换为页面body标签内，其它绝大部分标签！)!doctype htmlhtmlmeta http-equiv=Content-Type content=text/html; charset=utf-8 /headtitle颜色标签/title/headbodyp style=color:red;顺其自然/p/body/html第二种：用内部样式表改变...
html5 <p></p> 内部怎么设置文字颜色
weixin_35754962的博客
01-12 4056
<p>可以在<p>标签内部使用style属性来设置文字颜色，如：</p> <p style="color: red;">这里是红色文字</p> <p>也可以在<p>标签外部使用CSS样式来设置文字颜色，如：</p> <style> p { color: red; ...
使p标签变成红色
weixin_45746590的博客
10-28 1851
21节点之点击按钮设置div中p标签改变背景颜色
dinggu6579的博客
09-09 1020
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 300p...
html中p标签的颜色,html中p标签可以以什么结束
weixin_33479657的博客
06-30 615
在html中，p标签用于定义段落，因是双标签，所以必须成对出现，即以“”开头，“”结尾，包含在“”和“”标签对中的为段落文本，语法“内容”。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。HTML 标签 标签定义段落。p标签定义的段落会在其前后添加一些空白，我们也可以在css样式表中规定空白的大小。p标签语法格式内容说明：p标签中的内容默认是没有显示效果的，p标签的作用是...
【个人学习·作业01】Vue作业：点击哪一项，该项的文字变红色
qq_44956826的博客
06-06 232
css部分 <style> .active { color: red; } </style> 网页显示部分 <p>作业</p> <div id="app"> <ul> <li v-for="(item,index) in movies" @click='changeColor(index)' :class="{
Vue简单示例——自定义指令
hssjsh的博客
10-26 504
Vue简单示例——自定义指令的简单运用和简单案例
html 标签点击 变颜色
yournevermore的博客
12-14 8609
&lt;head&gt; $("#cap_list li").click(function(){ $.each($("#cap_list li"),function(i ,o){ $(o).removeClass("li_active"); }); $(this).addClass("li_active"); } &lt;...
vue 两个dev切换文字颜色
04-07
可以使用条件渲染来实现。在模板中绑定一个变量，然后通过 v-bind:class 指令来动态绑定 class，如下所示： ``` <template> <div> <button @click="toggleDev">{{ devMode }}</button> <p :class="[devMode === 'A' ? 'color-a' : 'color-b']">Hello World</p> </div> </template> <script> export default { data() { return { devMode: 'A' } }, methods: { toggleDev() { this.devMode = this.devMode === 'A' ? 'B' : 'A' } } } </script> <style> .color-a { color: red; } .color-b { color: blue; } </style> ``` 在这个示例中，我们绑定了一个变量 devMode，然后在模板中通过条件渲染来动态绑定 class。当 devMode 等于 A 时，p 标签会绑定 color-a 类，文字颜色会变成红色；当 devMode 等于 B 时，p 标签会绑定 color-b 类，文字颜色会变成蓝色。通过点击按钮，可以切换 devMode 的值，从而实现文字颜色的切换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值