<!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. Win7系统安装 MySQL 5.7.23

    1. 下载 MySQL 5.7版本:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 2. 解压到指定文件夹,mysql根目录下创建my ...

  2. 【BZOJ2794】[Poi2012]Cloakroom 离线+背包

    [BZOJ2794][Poi2012]Cloakroom Description 有n件物品,每件物品有三个属性a[i], b[i], c[i] (a[i]<b[i]).再给出q个询问,每个询问 ...

  3. Android输入法的显示与隐藏

    显示输入法: public void ShowSoftInput(View v) { // v 接受输入的控件 mInputMethodManager = (InputMethodManager) ( ...

  4. 超哥mysql数据库部分blog整理:

    总目录:mysql数据库阶段学习目录 https://www.cnblogs.com/clschao/articles/10065275.html Day1. 1.数据库初识 https://www. ...

  5. <2013 07 06> Future and Near Future

    试图了解     量子力学 近现代基础物理学理论 量子计算机   脑科学 近现代生物学 遗传变异与进化   复杂工程学 系统工程 管理科学   人工智能 智能算法 机器学习 深度学习 大数据 云计算 ...

  6. 使用mybatis向oracle数据库插入数据异常

    遇到了使用mybatis向oracle数据库插入数据异常的问题, 具体的报错如下:org.springframework.jdbc.UncategorizedSQLException: ### Err ...

  7. spring web中完成单元测试

    对于在springweb总完单元测试,之前找过些资料,摸索了很久,记录下最终自己使用的方法 1,创建测试类,创建测试资源文件夹 src/test/resources/WEB_INFO/conf 将工程 ...

  8. 【22,23节】Django的GET和POST属性笔记

    COOKIES:一个标准的python字典对象,包含所有cookies,键和值都为字符串session:一个即能读又能写的类似字典对象,表示当前的会话,只有当django启用会话的支持时才可用 一键多 ...

  9. 我的Android进阶之旅------>Android关于Activity管理的一个简单封装

    用一个集合类对所有的Activity进行管理,实现随时控制Activity.用add(Activity activity)方法向List中添加Activity,用remove(Activity act ...

  10. 2、hive的基本操作

    1.创建数据库和表 1)创建数据库 hive> CREATE DATABASE IF NOT EXISTS userdb; OK Time taken: 0.252 seconds hive&g ...