控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码，获得 <p> 元素的 class 属性和改变className：

结果:

显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：

Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

语法:

Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

基本属性表（property）:

注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

<p id="pcon">Hello World!</p> <script>    var mychar = document.getElementById("pcon");    mychar.style.color="red";    mychar.style.fontSize="20";    mychar.style.backgroundColor ="blue"; </script>

结果:

javascript可以让页面呈现动态效果

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口

例如:关闭新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

在写JS代码的时候，大家可以会发现这样现象:

document.write("   1      2                3  ");

结果: 1 2 3

无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。

这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。

解决方法:

1. 使用输出html标签&nbsp;来解决

 document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");

 结果:  1    23

2. 使用CSS样式来解决

 document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");

 结果:  1       2     3    

 在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

用法：

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口

window.open([URL], [窗口名称], [参数字符串])
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。窗口名称：可选参数，被打开窗口的名称。    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

 var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }

当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false

在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

alert(字符串或变量);

语法：

Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

例如：

var mychar = document.getElementById("con");

        document.getElementById("con").style.display("none");

1. document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。

2. document.write(mystr);  //直接写变量名，输出变量存储的内容。

3. document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接

4. document.write(mystr+"<br>");//输出hello后，输出一个换行符

   
   

   无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。

   这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。

   解决方法:

   1. 使用输出html标签&nbsp;来解决

    document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");

    结果:  1    23

   2. 使用CSS样式来解决

    document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");

    结果:  1       2     3    

    在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"