<!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=gb2312" />

<title>节点操作</title>

<script type="text/javascript">

function changeSize(size)

{

	var divid = document.getElementById("newsid");

	divid.style.fontSize = size;

}

function changeClass(classname)

{

	var divid = document.getElementById("newsid");

	divid.className = classname;

}

function showlist()

{

/*

	获取事件源对象的两种方式

	1. 通过event.srcElement

	2. 将事件通过this传入

*/

	var dtNode = event.srcElement;

	var dlNode = dtNode.parentNode;

	if(dlNode.className=="open")

	{

		dlNode.className = "close";

	}

	else

	{

		dlNode.className="open";

	}

}

function showlist2(srcElement)

{

/*

	获取事件源对象的两种方式

	1. 通过event.srcElement

	2. 将事件通过this传入

*/

	var dtNode = srcElement;

	var dlNode = dtNode.parentNode;

	if(dlNode.className=="open")

	{

		dlNode.className = "close";

	}

	else

	{

		dlNode.className="open";

	}

}

</script>

<style type="text/css" >

.max{

	background-color:#999900;

	color:#003399;

	font-size:36px;

}

.mid{

	background-color:#000000;

	color:#FFFFFF;

	font-size:24px;

}

.min{

	background-color:#000099;

	color:#FFFFFF;

	font-size:12px;

}

.close{

	overflow:hidden;

}

.open{;

	overflow:visible;

	height:80px;

}

dl{

	overflow:hidden;

	height:16px;

}

</style>

</head>

<body>

<h2>新闻标题</h2>

<a href="javascript:void(0)" onclick="changeClass('max')">大</a>

<a href="javascript:void(0)" onclick="changeClass('mid')">中</a>

<a href="javascript:void(0)" onclick="changeClass('min')">小</a> <br/>

<div id="newsid" class="mid">

新闻内容 新闻内容 新闻内容 <br/>

新闻内容 新闻内容 新闻内容 <br/>

新闻内容 新闻内容 新闻内容 <br/>

新闻内容 新闻内容 新闻内容 <br/>

新闻内容 新闻内容 新闻内容 <br/>

</div>

<dl>

	<dt onclick="showlist()">上层项目1

		<dd>子项目11</dd>

		<dd>子项目12</dd>

		<dd>子项目13</dd>

	</dt>

</dl>

<dl>

	<dt onclick="showlist2(this)">上层项目2

		<dd>子项目21</dd>

		<dd>子项目22</dd>

		<dd>子项目23</dd>

	</dt>

</dl>

</body>

</html>

JavaScript -- 节点操作， 事件触发， 表单伸缩的更多相关文章

  1. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

  2. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  3. 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  4. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  5. 使用 elementUI 的表单进行查询，表单中只有一个文本框时，回车会自动触发表单的提交事件，导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

  6. jQuery-3.事件篇---表单事件

    jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的 ...

  7. jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  8. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  9. vue之回车触发表单提交

    vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...

  10. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

随机推荐

  1. Uvalive6885(最短路)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=129723 题目大意:n个点,m条边,求出从0到n的最短距离,输出途 ...

  2. HDU3037 附Lucas简单整理

    Saving Beans Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  3. Spring3.2.11与Quartz2.2.1整合时内存泄漏的问题的解决

    Quartz是一款定时任务调度的开源框架,使用起来比较方便.并且Spring的support包对Quartz有集成.但是笔者在web应用使用的过程中却遇到了内存泄漏的问题. 问题的产生 笔者在使用Sp ...

  4. 如何用SQL为每一行均产生一个随机数

    ) as int) as RndId from 表名

  5. bootstrap页面布局

    首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页 ...

  6. C 和 C++ 的标准库分别有自己的 locale 操作方法，C 标准库的 locale 设定函数是 setlocale()，而 C++ 标准库有 locale 类和流对象的 imbue() 方法（gcc使用zh_CN.GBK，或者zh_CN.UTF-8，VC++使用Chinese_People's Republic of China.936或者65001.）

    转自:http://zyxhome.org/wp/cc-prog-lang/c-stdlib-setlocale-usage-note/ [在此向原文作者说声谢谢!若有读者看到文章转载时请写该转载地址 ...

  7. Windows下比较小巧的c/c++ ide

    下载:codeblocks 只有几十兆. http://www.codeblocks.org/downloads/26#windows codeblocks-16.01mingw-nosetup.zi ...

  8. spring security原理

    spring security通过一系列过滤器实现其功能,入口过滤器如下(web.xml): <filter> <filter-name>springSecurityFilte ...

  9. Js算两经纬度间球面距离

    function GetDistance( lat1, lng1, lat2, lng2){ var radLat1 = lat1 * Math.PI / 180.0 var radLat2 = la ...

  10. Python __setitem__()、__getitem__()、__delitem__()

    转载:http://blog.csdn.net/xhw88398569/article/details/48690163 __xxxitem__:使用 [''] 的方式操作属性时被调用 __setit ...