<!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. POJ3259（虫洞）

    题目大意:给你一张图,先输入m条双向边(权值为正),再输入w条单向边(权值为负),判断是否有负环 题目思路:bellman-ford或者SPFA都行,我用的是SPFA(因为和POJ1860类似,就不加 ...

  2. 【BZOJ3239】Discrete Logging BSGS

    [BZOJ3239]Discrete Logging Description Given a prime P, 2 <= P < 231, an integer B, 2 <= B ...

  3. Nginx敏感信息泄露漏洞（CVE-2017-7529）

    2017年7月11日,为了修复整数溢出漏洞(CVE-2017-7529), Nginx官方发布了nginx-1.12.1 stable和nginx-1.13.3 mainline版本,并且提供了官方p ...

  4. Linux中的awk命令

    awk '条件1{动作1} 条件2{动作2} ...'  文件名 条件: BEGIN          在处理文件里的第一行数据之前执行 END              在处理完文件里的最后一行数据 ...

  5. 博客没内容可写了怎么办?找BD！

    博客写了一段时间可能会感觉没内容可以写了,或者说同一个领域的内容写多了感觉有点千篇一律,这时要考虑扩展自己的写作领域,怎么去扩展呢?利用关键词工具可以衍生很多长尾词,当然这个有点牵强,有点为优化而优化 ...

  6. Matlab mser(最大极值稳定区域)

    在Matlab R2013a 和R2014a中已经实现MSER特征的提取. 一.函数detectMSERFeatures 输入的是M*N的灰度图片.可以指定阈值刻度,区域范围,感兴趣区域等参数. 输出 ...

  7. java switch case 枚举类型的反编译结果

     package com.example.demo; import java.io.PrintStream;  // Referenced classes of package com.example ...

  8. python学习之路-第二天-常见的注意事项（代码风格、运算符、优先级、控制语句）

    总结了今天学习几个注意事项: 对代码声明变量的时候没必要像以前写java或者c代码要声明数据类型,只需要赋值即可 代码一行基本只写一句逻辑行,而且尽量不在python里面写':' 明确的行连接'',暗 ...

  9. 对称加密&非对称加密

    对称密钥密码算法的特点: 算法简单,加/解密速度快,但密钥管理复杂,不便于数字签名: 非对称密钥密码算法的特点: 算法复杂,加/解密速度慢,密钥管理简单,可用于数字签名. 所以将两者结合起来,形成混合 ...

  10. Shell Script Notes

    shell Script学习笔记 <鸟哥的Linux私房菜 3rd Edition>: @1:若变量内容中包含空格字符,则可使用双引号"或单引号'将变量内容结合起来,但不同的是: ...