document对象

1.链接文字颜色设置

链接的颜色

alinkcolor
获取或者设置当链接获得焦点时显示的颜色。
linkcolor
设置颜色的名称或者颜色的RGB值
vlinkcolor
获取或者设置页面点击过的链接的颜色。

<font size="10pt" face="隶书">
<a id="a1" href="www.mingrisoft.com">JavaScript论坛</a></font>

 <script language="JavaScript">
document.vlinkColor="#00CCFF"; 
document.linkColor="green"; 
document.alinkColor="000000"; 
</script>

当未单击超链接时，超链接字体的颜色为绿色
；当单击超链接时，超链接字体的颜色为黑色，
；当单击过超链接时，超链接的字体颜色为淡蓝色，。

如图:
在这里插入图片描述

在这里插入图片描述
(当鼠标在该链接上单击时变成黑色）

背景的颜色

文档前景色和背景色设置文档背景色和前景色的设置可以使用bgColor属性和fgColor属性来实现。
　（1）bgColor属性该属性用来获取或设置页面的背景颜色。
　 2）fgColor属性该属性用来获取或设置页面的前景颜色，即页面中文字的颜色

<body>背景自动变色 <script language="javascript">
 var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF","#FFFF00","#FFCC00","#FF00FF");
  var n=0;
   function turncolors()
   {
     
      n++; if(n==(Arraycolor.length-1))n=0; document.bgColor=Arraycolor[n];//设置页面的背景颜色 document.fgColor=Arraycolor[n-1];//设置页面的文字颜色 setTimeout("turncolors()",1000);
   } turncolors(); </script> 
   </body>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210119223538824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0,size_16,color_FFFFFF,t_70

查看文档创建日期、修改日期和文档大小

可以使用fileCreatedDate属性、fileModifiedDate属性、lastModified属性和fileSize属性来实现。
（1）fileCreatedDate属性该属性用来获取文档的创建日期。语法格式如下： [date=]fileCreatedDate
（2）fileModifiedDate属性该属性用来获取文档修改的日期。

<body> 查看文件创建日期、修改日期和文档大小
<br>
<script lanage="javaScript" >
<!-- 
document.write("<b>该文档创建日期:＆nbsp;</b>"+document.fileCreatedDate+"<br>"); 
document.write("<b>该文档修改日期:＆nbsp;</b>"+document.fileModifiedDate+"<br>"); 
document.write("<b>该文档修改时间:＆nbsp;</b>"+document.lastModified+"＜br＞"); 
document.write("<b>该文档大小:＆nbsp;</b>"+document.fileSize+"<br>"); 
-->
 </script> 
 </body>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210119224110393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU4NTc0,size_16,color_FFFFFF,t_70

获取并设置URL

<body> 
<br>
<script language="javascript">
    <!--
    document.write("<b>当前页面的URL:&nbsp;</b>"+document.URL);
function setURL(t) {
     
      document.URL=t; var u=document.URL; return u; }
-->
</script>
<p>输入要跳转的页面URL: <input name="titleName" type="text">
<input name="Input" value="跳转" onClick="setURL(titleName.value)"type="button">
</p>
</p>
</body>

在这里插入图片描述

获取当前对象的状态值

可以用readystate
语法格式如下： [state=]obj.readyState
obj：需要显示状态的对象，是必选项。
state：字符串变量，用来获取当前对象的状态，其状态值及说明如表
在这里插入图片描述


<input name="t1" type="text">
<script language="javascript">
<!--
 document.write("<br><b>文本框当前状态:&nbsp;</b>"+t1.readyState+"<br>"); document.write("<b>Document对象的当前状态:&nbsp;</b>"+document.readyState); 
--> 
</script>

在这里插入图片描述
(感觉好像有问题，文本框应该是显示complete才对）

在文档中输出数据

在文档中输出数据可以使用write方法和writeln方法来实现。（1）write方法该方法用来向HTML文档中输出数据，其数据包括字符串、数字和HTML标记等。语法格式如下： document.write(text);
参数text表示在HTML文档中输出的内容。
（2）writeln方法该方法与write方法的作用大致相同，唯一的区别在于writeln方法在所输出的内容后添加了一个回车换行符。但回车换行符只有在HTML文档中的＜pre＞…＜/pre＞标记（此标记把文档中的空格、回车、换行等表现出来）内才能被识别。语法格式如下： document.writeln(text); 参数text表示在HTML文档中输出的内容。

<script language="javascript"><!-- 
document.write("使用write()方法输出的第一段内容！"); document.write("使用write()方法输出的第二段内容<hr color='#003366'>");
document.writeln("使用writeln()方法输出的第一段内容！"); document.writeln("使用writeln()方法输出的第二段内容<hr color='#003366'>"); 
-->
</script>
<pre>
<script language="javascript"><!-- 
document.writeln("在pre标记内使用writeln()方法输出的第一段内容！"); 
document.writeln("在pre标记内使用writeln()方法输出的第二段内容"); --></script></pre>

window对象

概述

Window对象 Window对象代表的是打开的浏览器窗口。通过Window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目。对于窗口中的内容，Window对象可以控制是否重载网页、返回上一个文档或前进到下一个文档。在框架方面，Window对象可以处理框架与框架之间的关系，并通过这种关系在一个框架处理另一个框架中的文档。Window对象还是所有其他对象的顶级对象。通过对Window对象的子对象进行操作，可以实现更多的动态效果。Window对象作为对象的一种，也有着其自己的方法和属性。
在这里插入图片描述

对话框

对话框（Dialog）是响应用户某种需求而弹出的小窗口。本节将介绍几种常用的对话框：警告对话框、询问回答对话框及提示对话框。

警告对话框

在页面显示时弹出警告对话框主要是在＜body＞标记中调用Window对象的alert方法实现的。下面对该方法进行详细说明。

询问回答对话框

Window对象的confirm方法用于弹出一个询问回答为是或否问题的对话框。该对话框中包含两个按钮（在中文操作系统中显示为“确定”和“取消”，在英文操作系统中显示为"OK"和"Cancel"）。用户单击“确定”按钮，返回值为true；单击“取消”按钮，返回值为false。语法格式如下： window.confirm(question)

var bool=window.confirm("确定要关闭浏览器吗？"); if(bool==true){
    
    //如果用户单击了“确定”按钮 window.close();//关闭窗口 }

在这里插入图片描述

提示对话框

利用Window对象的prompt方法可以在浏览器窗口中弹出一个提示框。与警告对话框和询问回答对话框不同，在提示框中有一个输入框。当显示输入框时，在输入框内显示提示字符串，在输入文本框显示缺省文本，并等待用户输入。当用户在该输入框中输入文字后，并单击“确定”按钮时，返回用户输入的字符串；当单击“取消”按钮时，返回null值。

<script language="javascript">
function rdl_doClick(){
     
      var oMessage=document.all("oMessage"); oMessage.value=window.prompt(oMessage.value,"返回的信息"); }
</script>
<input id=oMessage type=text size=40 value="请在此输入信息"><br><br><input type=button value="显示对话框" onclick="rdl_doClick();">

在这里插入图片描述

窗口的打开与关闭

窗口的打开和关闭主要使用open和close方法实现，也可以在打开窗口时指定窗口的大小及位置。下面介绍窗口的打开与关闭的实现方法。
打开窗口可以使用JavaScript的open方法打开浏览器对话框。可以基于特定的条件创建带有被装入其中的特定文档的新对话框，也可以指定新对话框的大小以及对话框中可用的选项，并且可以为引用的对话框指派名字。利用open方法可以打开一个新的窗口，并在窗口中装载指定URL地址的网页。
WindowVar=window.open(url,windowname[,location]); WindowVar：当前打开窗口的句柄。如果open方法成功，则WindowVar的值为一个Window对象的句柄，否则WindowVar的值是一个空值。
url：目标窗口的URL。如果URL是一个空字符串，则浏览器将打开一个空白窗口，允许用write方法创建动态HTML。 windowname：Window对象的名称。该名称可以作为属性值在＜a＞和＜form＞标记的target属性中出现。如果指定的名称是一个已经存在的窗口名称，则返回对该窗口的引用，而不会再新打开一个窗口。 location：对对话框属性进行设置，其可选参数及说明如表
在这里插入图片描述

通过open方法打开新窗口通过open方法可以在进入首页时，弹出一个固定大小及位置的新窗口

 `<script language="javascript">
   <!--
   window.open("https://www.baidu.com/","new","height=141,width=693,top=10,left=20");
    -->
</script>`

注意：
1）通常浏览器窗口中，总有一个文档是打开的，因而不需要为输出建立一个新文档。
（2）在完成对Web文档的写操作后，要使用或调用close方法来实现对输出流的关闭。
（3）在使用open方法来打开一个新流时，可为文档指定一个有效的文档类型。有效文档类型包括text/HTML、text/gif、text/xim、text/plugin等。

通过按钮打开新窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>now start</title>

</head>
<body>
<script language="javascript">
    function pp()
    {
     
      window.open('trans.html','','toolbar,menubar,scrollbars,resizable, status,location,directories,copyhistory,height=400,width=500'); }
</script>
<form name="form1" method="post" action="">
    <input type="button" name="Button" value="创建新窗口" onClick="pp()">
</form>
</body>
</html>

trans.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是一个新的窗口！！！！
</body>
</html>

在这里插入图片描述

点击按钮以后：
在这里插入图片描述
关闭当前窗口，可以用下面的任何一种语句实现。
window. close();
close();
this. close();

移动窗口

下面介绍几种移动窗口的方法。（1）moveTo方法利用moveTo方法可以将窗口移动到指定坐标（x，y）处。语法格式如下：
例如，将窗口移动到指定的坐标（300，300）处，代码如下： window.moveTo(300,300)
说明　moveTo方法是Navigator和IE都支持的方法，它不属于W3C标准的DOM。
（2）resizeTo方法利用resizeTo方法可以将当前窗口变成（x，y）大小，x、y分别为宽度和高度。
3）Screen对象 Screen对象是JavaScript中的屏幕对象，反映了当前用户的屏幕设置。该对象的常用属性及说明如表
window.screen.width//屏幕宽度
window.screen.height//屏幕高度 window.screen.colorDepth//屏幕色深 window.screen.availWidth//可用宽度 window.screen.availHeight//可用高度(除去任务栏的高度)
实例：打开窗口时窗口放在左上角，从左到右随即移动，外边框碰到屏幕四边时窗口反弹。（动态变化）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>now start</title>

</head>
<body>
<script language="javascript">
    window.resizeTo(300,300);//指定将窗口变成的大小
    window.moveTo(0,0);
    inter=setInterval("go()",1);
    var aa=0 ;var bb=0; var a=0 ;var b=0 ;
    function go() {
     
      try{
     
      if(aa==0) a=a+2; if(a>screen.availWidth-300)
        aa=1; if(aa==1) a=a-2; if(a==0) aa=0; if(bb==0) b=b+2;
        if(b>screen.availHeight-300) bb=1;
        if(bb==1) b=b-2; if(b==0) bb=0;
        window.moveTo(a,b); }
    catch(e){
     
     } }
</script>
<form name="form1" method="post" action="">
    <input type="button" name="Button" value="创建新窗口" onClick="pp()">
</form>
</body>
</html>

窗口滚动

利用Window对象的scroll方法
**Window对象中有3种方法可以用来滚动窗口中的文档。**这3种方法的使用如下：
window.scroll(x,y)
window.scrollTo(x,y)
window.scrollBy(x,y)
scroll：该方法可以将窗口中显示的文档滚动到指定的绝对位置。滚动的位置由参数x和y决定，其中x为要滚动的横向坐标，y为要滚动的纵向坐标。两个坐标都是相对文档的左上角而言的，即文档的左上角坐标为（0，0）。

<script language="javascript">
    var message="欢迎来到明日科技主页，请您提出宝贵意见！"//状态栏信息
     var position=300;//位置
    var delay=10;//弹出文字的间隔时间
    var statusobj=new statusMessageObject();
    function statusMessageObject(p,d) {
     
      this.msg=message; this.out=""; this.pos=position;
        this.delay=delay; this.i=0; this.reset=clearMessage; }
        function clearMessage()//清空信息
    {
     
      this.pos=POSITION; }
    function brush() {
     
      for(statusobj.i=0;statusobj.i<statusobj.pos;statusobj.i++)
    {
     
      statusobj.out+=""; } if(statusobj.pos>=0) statusobj.out+=statusobj.msg;
    else
        statusobj.out=statusobj.msg.substring(-statusobj.pos,statusobj.msg.length);
    window.status=statusobj.out;
    statusobj.out="";
    statusobj.pos--;
    if(statusobj.pos<-(statusobj.msg.length)) {
     
      statusobj.reset(); } setTimeout('brush()',statusobj.delay); }
        function outtext(space,position)
    {
     
      var msg=statusobj.msg;
    var out="";
    for(var i=0;i<position;i++)
    {
     
     
        out+=msg.charAt(i);
    }
    for(i=1;i<space;i++) {
     
      out+=""; }
        out+=msg.charAt(position); window.status=out; if(space<=1)
        {
     
      position++;
        if(msg.charAt(position)==''){
     
      position++;}
        space=100-position; }
        else if(space>3) {
     
      space*=.75; }
    else {
     
      space--; }
    if(position!=msg.length)
    {
     
      var cmd="outtext("+space+","+position+")"; scrollID=window.setTimeout(cmd,statusobj.delay); }
    else {
     
      window.status=""; space=0; position=0;
    cmd="outtext("+space+","+position+")";
    scrollID=window.setTimeout(cmd,statusobj.delay);
        return false; } return true;} outtext(100,0);

</script>

IE浏览器支持一些特殊类型的窗口。

模式窗口

模式窗口很像一个标准的对话框。模式窗口会屏蔽主窗口，直到将其关闭。其基本语法为： window.showModalDialog(对话框URL，参数，特征)
对话框URL：指要显示的文档的URL地址；参数：指要传递给模式对话框的对象或值；特征：一个用逗号分隔的列表，包含了对话框的显示特征。例如，

  <script language="javascript">
<!-- window.showModalDialog("index.htm",window,"dialogHeight:150px;dialogWidth:300px;center:yes;help:no;resizable:no;status:no;"); -->
   </script>

无模式窗口

无模式窗口与模式窗口完全不同。模式窗口永远停留在原窗口的上层，即使原窗口获得焦点，仍然如此。通常用无模式窗口显示帮助信息或其他上下文相关信息。

网页核心--document对象和window对象

document对象

1.链接文字颜色设置

链接的颜色

背景的颜色

查看文档创建日期、修改日期和文档大小

获取并设置URL

获取当前对象的状态值

在文档中输出数据

window对象

概述

对话框

警告对话框

询问回答对话框

提示对话框

窗口的打开与关闭

移动窗口

窗口滚动

模式窗口

无模式窗口

猜你喜欢