<!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>使用Document方法</title>
<style type="text/css">
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
width:90px;
font-size:12px;
padding:0;
}
#node{
width:100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
function changeLink(){
document.getElementById("node").innerHTML="搜狐";
} function all_input(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
} function s_input(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
} </script>
</head> <body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
</html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用Document方法</title>
<style type="text/css">
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
width:90px;
font-size:12px;
padding:0;
}
#node{
width:100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
function changeLink(){
document.getElementById("node").innerHTML="搜狐";
}

function all_input(){
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}

function s_input(){
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}

</script>
</head>

<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>

CSS之Document方法的使用的更多相关文章

  1. 在HTML页面中加载js文件和css文件的方法

    1.在HTML页面加载js文件的方法: function loadScriptFile(filePath){ var script = document.createElement("scr ...

  2. 重温JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...

  3. 第60天:js常用访问CSS属性的方法

    一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法  box.style.width      box.style.top     点语法可以得到 ...

  4. css简介以及css的添加方法

    什么是css? CSS是Cascading Style Sheets的简称,CSS是用来美化网页中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. css的基本语法 1.选择 ...

  5. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  6. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  7. CSS居中的方法整合--水平居中

    原文 CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷.是水平居中还是垂直居中?是block还是inline? 居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定. 这里就从这些方 ...

  8. 还在手动给css加前缀?no!几种自动处理css前缀的方法简介

    原文首发于个人博客:还在手动给css加前缀?no!几种自动处理css前缀的方法简介 我们知道在写css的时候由于要兼容不同厂商浏览器,一些比较新的属性需要给它们添加厂商前缀来兼容.移动端还好,基本只要 ...

  9. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

随机推荐

  1. 使用Android Studio与ArcGIS Android SDK的开发环境部署和HelloWorld

    android studio(以下简称AS)是google推荐的android专用IDE,替代目前主流的eclipse,另外arcgis也把AS作为推荐的android IDE 本文不介绍androi ...

  2. Codeforces Round #181 (Div. 2) A. Array 构造

    A. Array 题目连接: http://www.codeforces.com/contest/300/problem/A Description Vitaly has an array of n ...

  3. 【Java编码准则】の #11不要使用Object.equals()来比較密钥值

    java.lang.Object.equals()函数默认情况下是不能用来比較组合对象的,比如密钥值.非常多Key类没有覆写equals()函数,因此,组合对象的比較必须单独比較里面的各个类型以保证正 ...

  4. GlusterFS创建volume失败的解决方法(* or a prefix of it is already part of a volume)

    问题描写叙述: 之前已经创建了一个replicated的volume gv0,replica=2,两个文件夹为:/test/data1和/test/data2,之后发现这两个文件夹不太合适,想在/te ...

  5. JavaScript中事件捕获(Event capturing)-------------->由外向内,事件冒泡(Event bubblin)---------->由内向外

    addEventListener("click", function() {}, useCapture:false); <!DOCTYPE html> <html ...

  6. 【JavaScript】JavaScript脚本代码的位置及在页面中的执行顺序

    三.如何改变Javascript在页面的执行顺序 利用onload <script type="text/javascript">window.onload = f; ...

  7. [ES6] 14. Generator -- 1. yield & next()

    Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution  ...

  8. iOS开发——UI篇Swift篇&UIToolbar

    UIToolbar class UIToolBarUISearchBar: UIViewController,UISearchBarDelegate { var titleString:String! ...

  9. angularJs项目实战!02:前端的页面分解与组装

    自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...

  10. MySQL 5.7 深度解析: 临时表空间

    http://www.actionsky.com/docs/archives/159  2016年1月8日  杨涛涛 先来说说临时表的概念. 临时表顾名思义,就是临时的,用完销毁掉的表. 数据既可以保 ...