泉州浮桥网页设计培训班实例笔记HTML DOM 实例(八)-Navigator

Navigator   更多学习内容:泉州电脑设计培训班

检测访问者的浏览器和版本号

<html><body>

<script type=”text/javascript”>

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

document.write(“浏览器名称:”+ browser)

document.write(“<br />”)

document.write(“浏览器版本:”+ version)

</script>

</body></html>

有关访问者的浏览器的更多信息

<html>

<body>

<script type=”text/javascript”>

document.write(“<p>浏览器:”)

document.write(navigator.appName + “</p>”)

 

document.write(“<p>浏览器版本:”)

document.write(navigator.appVersion + “</p>”)

 

document.write(“<p>代码:”)

document.write(navigator.appCodeName + “</p>”)

 

document.write(“<p>平台:”)

document.write(navigator.platform + “</p>”)

document.write(“<p>Cookies 启用:”)

document.write(navigator.cookieEnabled + “</p>”)

document.write(“<p>浏览器的用户代理报头:”)

document.write(navigator.userAgent + “</p>”)

</script>

</body></html>

有关访问者的浏览器的全部细节

<html>

<body>

 

<script type=”text/javascript”>

var x = navigator;

document.write(“CodeName=” + x.appCodeName);

document.write(“<br />”);

document.write(“MinorVersion=” + x.appMinorVersion);

document.write(“<br />”);

document.write(“Name=” + x.appName);

document.write(“<br />”);

document.write(“Version=” + x.appVersion);

document.write(“<br />”);

document.write(“CookieEnabled=” + x.cookieEnabled);

document.write(“<br />”);

document.write(“CPUClass=” + x.cpuClass);

document.write(“<br />”);

document.write(“OnLine=” + x.onLine);

document.write(“<br />”);

document.write(“Platform=” + x.platform);

document.write(“<br />”);

document.write(“UA=” + x.userAgent);

document.write(“<br />”);

document.write(“BrowserLanguage=” + x.browserLanguage);

document.write(“<br />”);

document.write(“SystemLanguage=” + x.systemLanguage);

document.write(“<br />”);

document.write(“UserLanguage=” + x.userLanguage);

</script>

</body></html>

根据浏览器来提醒用户

<html><head>

<script type=”text/javascript”>

function detectBrowser(){

var browser=navigator.appName

var b_version=navigator.appVersion

var version=parseFloat(b_version)

if ((browser==”Netscape”||browser==”Microsoft Internet Explorer”) && (version>=4))

{alert(“您的浏览器已经很棒了!”)}

else

{alert(“您的浏览器需要升级了!”)}

}

</script>

</head>

<body onload=”detectBrowser()”>

</body></html>

Option Select 对象

禁用并启用下拉列表

<html><head>

<script type=”text/javascript”>

function disable() {

document.getElementById(“mySelect”).disabled=true

}

function enable() {

document.getElementById(“mySelect”).disabled=false

}

</script>

</head><body>

<form>

<select id=”mySelect”>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

<br /><br />

<input type=”button” onclick=”disable()” value=”禁用列表”>

<input type=”button” onclick=”enable()” value=”启用列表”>

</form>

</body></html>

取得包含该下拉列表的表单的 id

<html><body>

<form id=”myForm”>

<select id=”mySelect”>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

</form>

<p>该表单的 id 是:

<script type=”text/javascript”>

document.write(document.getElementById(“mySelect”).form.id)

</script>

</p>

</body></html>

取得下拉列表中选项的数目

<html>

<head>

<script type=”text/javascript”>

function getLength()

{

alert(document.getElementById(“mySelect”).length)

}

</script>

</head>

<body>

 

<form>

<select id=”mySelect”>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

<input type=”button” onclick=”getLength()” value=”在这个列表中,有多少选项?”>

</form>

 

</body>

</html>

更改下拉列表中的可见行数

<html>

<head>

<script type=”text/javascript”>

function changeSize()

{

document.getElementById(“mySelect”).size=4

}

</script>

</head>

<body>

 

<form>

<select id=”mySelect”>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

<input type=”button” onclick=”changeSize()” value=”改变大小”>

</form>

 

</body>

</html>

选择下拉列表中的多个选项

<html>

<head>

<script type=”text/javascript”>

function selectMultiple()

{

document.getElementById(“mySelect”).multiple=true

}

</script>

</head>

<body>

 

<form>

<select id=”mySelect” size=”4″>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

<input type=”button” onclick=”selectMultiple()” value=”选择多个”>

</form>

<p>在您点击 “选择多个” 按钮之前,请尝试同时选取多个选项。在点击 “选择多个” 按钮之后,请再试一次。</p>

 

</body>

</html>

输出下拉列表中所有选项的文本

<html>

<head>

<script type=”text/javascript”>

function getOptions()

{

var x=document.getElementById(“mySelect”);

var y=””;

for (i=0;i<x.length;i++)

{

y+=x.options[i].text;

y+=”<br />”;

}

document.write(y);

}

</script>

</head>

 

<body>

 

<form>

请选择您喜欢的水果:

<select id=”mySelect”>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

<br /><br />

<input type=”button” onclick=”getOptions()” value=”输出所有选项”>

</form>

</body>

</html>

取得下拉列表中所选的选项的索引位置

<html>

<head>

<script type=”text/javascript”>

function alertIndex()

{

var x=document.getElementById(“mySelect”).selectedIndex;

var y=document.getElementsByTagName(“option”);

alert(y[x].text + ” has the index of: ” + y[x].index);

}

</script>

</head>

<body>

 

<form>

请选择您喜欢的水果:

<select id=”mySelect”>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

<br />

<br />

<input type=”button” onclick=”alertIndex()” value=”显示被选水果的 index”>

</form>

 

</body>

</html>

更改被选选项

<html>

<head>

<script type=”text/javascript”>

function selectOrange()

{

document.getElementById(“orange”).selected=true;

}

</script>

</head>

 

<body>

<form>

请选择您喜欢的水果:

<select>

<option id=”apple”>苹果</option>

<option id=”orange”>桔子</option>

<option id=”pineapple” selected=”selected”>菠萝</option>

<option id=”banana”>香蕉</option>

</select>

<br /><br />

<input type=”button” onclick=”selectOrange()” value=”选择桔子”>

</form>

</body>

</html>

从下拉列表中删除选项

<html><head>

<script type=”text/javascript”>

function removeOption()  {

var x=document.getElementById(“mySelect”)

x.remove(x.selectedIndex)

}

</script>

</head><body>

<form>

<select id=”mySelect”>

<option>苹果</option>

<option>桃子</option>

<option>香蕉</option>

<option>桔子</option>

</select>

<input type=”button” onclick=”removeOption()” value=”删除被选的选项”>

</form>

</body></html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注