手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >原生JS操作网页给p元素添加onclick事件及表格隔行变色
原生JS操作网页给p元素添加onclick事件及表格隔行变色
摘要:1.给网页中的所有p元素添加onclick事件:复制代码代码如下:Inserttitleherewindow.onload=function...

1. 给网页中的所有p元素添加onclick事件:

复制代码 代码如下:

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

<html>

<head>

<title>Insert title here</title>

<>

<script type="text/javascript">

window.onload=function(){

var items=document.getElementsByTagName("p");

for(i=0;i<items.length;i++){

items[i].onclick=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 type="text/javascript">

window.onload=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>

1

【原生JS操作网页给p元素添加onclick事件及表格隔行变色】相关文章:

JS控制表格隔行变色

js禁止页面刷新与后退的方法

js随机生成26个大小写字母

js的event详解。

Javascript技术栈中的四种依赖注入详解

精通JavaScript的this关键字

创建表格,并添加事件

图片之间的切换

JavaScript实现列表分页功能特效

jQuery插件jRumble实现网页元素抖动

精品推荐
分类导航