点击Div,显示其innerHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击Div,显示其innerHTML</title>
<style>
body{font:12px/1.5 Tahoma;}
#outer{width:500px;margin:0 auto;}
#outer div{border:2px solid #ccc;padding:10px;margin-bottom:10px;text-indent:2em;cursor:pointer;}
</style>
<script>
window.onload = function ()
{
    var oDiv = document.getElementById("outer").getElementsByTagName("div");
    for(var i = 0; i < oDiv.length; i++)
    {
        oDiv[i].onclick = function ()
        {
            alert(this.innerHTML)
        }
    }
}
</script>
</head>
<body>
<div id="outer">
    <div><strong>新华网</strong>北京5月29日电(新华社记者)从三聚氰胺到瘦肉精,从染色馒头到毒豆芽,在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。近期以来,从北京到广东,从浙江到宁夏,一场打击食品非法添加的"风暴"席卷全国。</div>
    <div>4月21日,国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后,广东省高度重视,随即召开了全省电视电话会议。省委领导强调,食品安全是"高压线",决不能"下不为例";抓好食品安全要突出一个"<strong>严</strong>"字,做到<strong>严防</strong>、<strong>严查</strong>、<strong>严处</strong>。</div>
    <div><strong>宁夏重点开展了四轮问题乳粉彻查清缴工作</strong>,对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查,共查处问题乳粉案件4起、涉案企业3家,吊销2家乳粉生产企业生产许可证。</div>
    <div>做好风险监测工作是许多地方加强食品安全的重点工作之一。在北京,<strong style="color:red;">全市设立了3000个风险监测点</strong>,建立了包括3000余种食品添加剂和非法添加物的数据库,对110家国内外食品相关组织、媒体发布的线索进行监测,及时进行风险评估,加强抽检控制。</div>
</div>
</body>
</html>
时间: 2024-10-29 19:12:39

点击Div,显示其innerHTML的相关文章

功能:点击div显示,点击其他地方隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta htt

作品第二课----点击DIV显示其内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 33%; margin: 10px 0 28px 34%; border: 1px solid #000; } str

React 点击按钮显示div与隐藏div,并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

点击按钮显示谷歌地图

原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

原文:JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果 一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面中使用ul列表显示出所有的缩略图,然后使用JavaScript,for循环检查出当前点击的是哪一张图片,最后把这张图片给显示出来. 用到三个函数:显示图片函数.创建占位符预装图片.点击显示图片

table点击一行显示下一行的特效

效果体验:http://sandbox.runjs.cn/show/rw4vq8zo <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .bordertable {width:100%;border-collapse: collapse;color: #707070;background:

一天JavaScript示例-点击图片显示大图片添加鼠标

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图加入鼠标操作</title> <style> img{padding:5px;width:100px;height:aut

每天一个JavaScript实例-点击图片显示大图添加鼠标操作

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图添加鼠标操作</title> <style> img{padding:5px;width:100px;height:aut

每天一个JavaScript实例-点击图片显示大图

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-点击图片显示大图</title> <style> img{padding:5px;width:100px;height:auto;} #o