原生JS操作网页给p元素添加onclick事件及表格隔行变色

最新推荐文章于 2021-12-29 16:36:21 发布
最新推荐文章于 2021-12-29 16:36:21 发布
阅读量953 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011714480/article/details/17068547
版权
1. 给网页中的所有p元素添加onclick事件：
 代码如下:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>Insert title here</title>

<!-- <script src="jQuery/jquery-1.10.2.js"></script>-->
<script type="text/javascript">
window.οnlοad=function(){
var items=document.getElementsByTagName("p");
for(i=0;i<items.length;i++){
items[i].οnclick=function(){
alert("单击成功...");
}
}
}
</script>
</head>
<body>
<p>测试段落一...</p>
<p>测试段落二...</p>
<p>测试段落三...</p>
</body>
</html>

2. 使一个特定的表格隔行变色：
复制代码 代码如下:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>Insert title here</title>

<!-- <script src="jQuery/jquery-1.10.2.js"></script>-->
<script type="text/javascript">
window.οnlοad=function(){
var item=document.getElementById("tb");
var tbody=item.getElementsByTagName("tbody")[0];
var trs=tbody.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="green";
}
}
}
</script>
</head>
<body>
<table id="tb" border="1">
<tbody>
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
<tr><td>第五行</td></tr>
<tr><td>第六行</td></tr>
</tbody>
</table>
</body>
</html>

秦飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
11-27
本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法。分享给大家供大家参考，具体如下： 这里演示js如何给页面中所有的img对象加上onclick事件，且实现在新窗体中查看该图片文件的功能： [removed] <!-- ///给页面中所有img对象添加onclick事件 //author:aganar /// function AddImgClickEvent() { var objs = document.ge
原生js绑定事件的三种方法
qq_65591699的博客
09-16 4834
【代码】原生js绑定事件的三种方法。
javascript 与jquery为每个p标签增加onclick方法
m0_55208453的博客
04-08 79
<scripttype="text/javascript"> window.onload=function(){ varitems=document.getElementsByTagName("p"); for(vari=0;i<items.length;i++){ ...
js中一些标签如<p><span>添加onclick失败的解决方案
weixin_41606022的博客
09-26 1851
html代码： <p id="fs">发送</p> js代码： function $(id) { return document.getElementById(id); } $('fs').onclick=function(){ //alert("333"); }
js生成p隔行颜色不一样
JackieDYH的博客
03-19 722
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 生成100个p元素，隔行变色 window.onload = function(...
jQuery 练习一：给网页中所有的 <p> 元素添加 onclick 事件
健健
08-02 3669
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;jquery&lt;/title&gt; &lt;script src="js/jquery-1.8.3.min.js" type="text/javascr
【JS】原生JS事件绑定onclick和addEventListener
热门推荐
mooonyuan的博客
04-11 3万+
onclick绑定方式 优点： - 简洁 - 处理事件的this关键字指向当前元素 缺点： - 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序，当使用window.onload属性时，会覆盖采用相同方法所绑定的事件代码 this与event查一不大 推荐使用event...
给网页中所有的<p>元素添加onclick事件及表格隔行变色
03-04 1688
//给网页中所有的元素添加onclick事件 var items = document.getElementByTagName("p"); for(var i = 0; i items[i].onclick = function(){ //do something } } /* 使某个特定的表格隔行变色 */ HTML代码如下： 第1行第1行 第2行第2
隔行变色
sunlizhen的专栏
06-15 199
//第一种： //首先获取div元素，因为要动态往div里添加p元素； var oDiv = document.getElementById("wrap"); //往div里动态添加p元素,因为要添加10个p每个p的内容不一样，所以要循环p； //var一个变量，初始值为空，以后要方变量的值； var str = ""; for(var i = 0;i10;i++){     i
通过原生JS实现为元素添加事件的方法
10-21
下面小编就为大家带来一篇通过原生JS实现为元素添加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
12-01
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考，具体如下： 最近一直在看JavaScript知识，偶尔也穿插一点Jquery，感觉Jquery用起来真爽，减少了很多的代码量，而且学习也不是很高。接...
js之事件
Renkx0404的博客
12-08 169
  事件的三要素： 事件源 事件名 事件行为、 在原生的js中事件分为0 级事件绑定和2级事件绑定，下面想说说0级的事件绑定 &lt;p onclick=" alert(1)" style="cursor: pointer;"&gt;点击我&lt;/p&gt; &lt;!-- 代码的方式绑定事件 --&gt; &lt;!-- 推荐使用 --&gt; &l
html中p标签隔行换色,原生JS操作网页给p元素添加onclick事件及表格隔行变色
weixin_39832348的博客
06-29 301
1. 给网页中的所有p元素添加onclick事件：复制代码 代码如下:Insert title herewindow.onload=function(){var items=document.getElementsByTagName("p");for(i=0;iitems[i].onclick=function(){alert("单击成功...");}}}测试段落一...测试段落二...测试段落三...
html绑定事件的方式（原生的js）
m0_61469746的博客
12-29 877
三种： 1》绑定事件：在标签上直接绑定 例：<p onclick="console.log(1)">hhh</p> 2》获取元素绑定 例：document.queryselector('p').onclick=function(){console.log(1) } 3》添加事件监听 例：document.queryselector('p').addEnentListener('click',()=>{consloe.log('1')}，false或true)//false为..
onclick事件改变元素的背景颜色
Byte_Dance的博客
12-30 8725
html> lang="en"> charset="UTF-8"> onclick事件 type="text/javascript" src="$function.js"> style="background:red">红 style="background:yellow">黄 style="background:green">绿 st
JavaScript例子1-给网页中所有<p>元素添加onclick事件
weixin_30876945的博客
08-06 302
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <script type="text/javascript"&g...
生成100个p元素，隔行变色（红、黄、蓝、绿、紫）
Taylor_224的博客
08-29 1046
思路： 1、首先动态创建100个p标签 2、利用for循环和步长的变化实现 代码：
神经网络与量子计算的交叉研究.pptx
最新发布
04-19
神经网络与量子计算的交叉研究.pptx
如何用原生js给一个按钮绑定两个onclick事件
06-28
可以使用addEventListener方法给按钮绑定两个onclick事件。例如代码如下： var btn = document.getElementById("myBtn"); btn.addEventListener("click", function() { // 第一个事件的处理函数 }); btn....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值