<!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. socket listen/accept

    listen函数 摘要:listen函数使用主动连接套接口变为被连接套接口,使得一个进程可以接受其它进程的请求,从而成为一个服务器进程.在TCP服务器编程中listen函数把进程变为一个服务器,并指定 ...

  2. CodeIgniter框架——表单辅助函数总结

    首先第一步就是载入辅助函数: $this->load->helper('form'); 函数解析: 1.form_open() 创建一个开始form标签,相对于你的配置文档中的基础URL. ...

  3. 【BZOJ2721】[Violet 5]樱花 线性筛素数

    [BZOJ2721][Violet 5]樱花 Description Input Output Sample Input 2 Sample Output 3 HINT 题解:,所以就是求(n!)2的约 ...

  4. 《从零开始学Swift》学习笔记（Day 46）——下标重写

    原创文章,欢迎转载.转载请注明:关东升的博客 下标是一种特殊属性.子类属性重写是重写属性的getter和setter访问器,对下标的重写也是重写下标的getter和setter访问器. 下面看一个示例 ...

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

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

  6. grafana-----Templating

    模板允许更多的互动和动态的仪表板.可以将变量用在度量查询中,不必硬编码诸如服务器.应用程序和传感器名称之类的东西.变量显示在仪表板顶部的下拉式选择框中.这些下拉菜单可以很容易地改变在你的仪表板显示的数 ...

  7. entropy 压缩信息的熵更加高 实际上英文文本的熵大概只有4.7比特

    https://en.wikipedia.org/wiki/Entropy_(information_theory) https://zh.wikipedia.org/wiki/熵(信息论) 熵的概念 ...

  8. jQuery获取相邻标签的值

    <!-- Mazey's jQuery --><script language="javascript" type="text/javascript&q ...

  9. tomcat部署jenkins启动报错：insufficient free space available after evicting expired cache entries-consider increasing the maximum size of the cache.

    在tomcat里面部署jenkins,启动tomcat,在jenkins上操作不久之后,jenkins就挂掉了,查看tomcat控制台,报内存溢出信息: 解决该问题方法,修改tomcat/bin目录下 ...

  10. win8内置管理员账号既能使用metro应用又能使用默认共享

    一.内置管理员账号打开METRO应用 1.按WIN+R 弹出运行框. 2.输入gpedit.msc点确定,打开本地组策略编辑器. 3.逐级选择“计算机配置”,“Windows 设置”,“安全设置”,“ ...