<!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. 注册Asp4.0到iis

  2. ID生成策略

    在电商项目中,图片名.商品ID都要唯一且方便存储,于是记录下这两个ID生成策略的方法,以便日后项目再有需要.具体代码如下 import java.util.Random; /** * 图片名生成 */ ...

  3. 实用 35 个 jQuery 小技巧

    1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return ...

  4. ES6学习笔记(三)——数值的扩展

    看到这条条目录有没有感觉很枯燥,觉得自己的工作中还用不到它所以实在没有耐心看下去,我也是最近得闲,逼自己静下心来去学习去总结,只有在别人浮躁的时候你能静下心来去学去看去总结,你才能进步.毕竟作为前端不 ...

  5. 我的Android进阶之旅------>Android百度地图定位SDK功能学习

    因为项目需求,需要使用百度地图的定位功能,因此去百度地图开发平台下载了百度地图的Android定位SDK最新版本的开发包和示例代码学习. Android 定位SDK地址:http://develope ...

  6. Codeforces 240F. TorCoder 线段树

    线段树统计和维护某一区间内的字母个数.. . . F. TorCoder time limit per test 3 seconds memory limit per test 256 megabyt ...

  7. npm报错npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-03-15T01_48_14_769Z-debug.log

    全局更新 npm npm i npm -g 就ok了

  8. pandas（一）操作Series和DataFrame的基本功能

    reindex:重新索引 pandas对象有一个重要的方法reindex,作用:创建一个适应新索引的新对象 以Series为例 >>> series_obj = Series([4. ...

  9. phonegap file api

    https://github.com/chrisben/imgcache.js/tree/master/examples 1.FILE API file api最大的两个功能是download和upl ...

  10. jmeter 测试restful接口

    jmeter 测试restful接口,JSON数据格式 1.添加线程组 2.添加HTTP信息头管理器 请求发送JSON数据格式参数,需要设置Content-Type为application/json ...