韩顺平网页设计第三十九讲

来源：互联网发布：算法里的mod是切莫意思编辑：程序博客网时间：2024/05/10 06:21

js是事件驱动编程：

事件的类型：主要分为四类。

案例一：监听鼠标的点击事件，并能够显示鼠标点击的xy坐标。

案列，js如何访问元素style属性，并修改样式，代码如下：

<script type="text/javascript">function test1(e){   alert("x="+e.clientX()+" y="+e.clientY);}function test2(e){   //document.writeln("x="+e.clientX()+" y="+e.clientY);   window.alert("ok");}function test3(){window.alert(new Date());}function test4(e){if(e.value=="黑色"){    //获取div1var div1=document.getElementById('div1');div1.style.backgroundColor="black";}else if(e.value=="红色"){    var div1=document.getElementById('div1');div1.style.backgroundColor="green";}}</script>  </head>   <!-- //body对象绑定一个鼠标按下事件和鼠标移动事件。event就是事件对象 -->  <!--<body  onmousedown="test1(event)" onmousemove="test2(event")>  -->  <body>        <input type="button" onclick="test3()" value="显示当前时间"/>                <div id="div1" style="width:400px;heigth:300px;background-color:red">div1</div>        <input type="button"  value="黑色" onclick="test4(this)"/>        <input type="button"  value="绿色" onclick="test4(this)"/>  </body>

运行结果：

下面将讲解改变外部css样式表的格式的方法：

下面为修改外部样式表属性的案列：

html文件：

 <!-- 引入外部样式表 -->    <link rel="stylesheet" type="text/css" href="mycss.css"><script type="text/javascript">function test4(e){//获取mycss.css中所有class选择器,[0]表示取引入的第一个外部css文件,如果想取第二个css文件，则【1】//ocssRules是一个集合，包括mycss.css文件中的所有选择器。var ocssRules = document.styleSheets[0].rules;//从ocssRules中取出你希望的class，这里为第一个规则。var style1 = ocssRules[0];if(e.value=="黑色"){style1.style.backgroundColor="black";}else if(e.value=="红色"){style1.style.backgroundColor="red";}}</script>  </head>   <body>        <div id="div1" class="style1">div1</div>        <input type="button"  value="黑色" onclick="test4(this)"/>        <input type="button"  value="红色" onclick="test4(this)"/>  </body>

css文件：

.style1{    width:600px;    height:400px;    background-color:green;}

运行结果如下：

浏览器类型的判断：可以用于浏览器兼容性的设置

  <title>lesson39-2.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">      <script  language="javascript" type="text/javascript">  //判断浏览器类型，用于浏览器兼容性设置  if(window.XMLHttpRequest) //Mozilla,Safari,IE7,IE8这个属性为真，IE6为假。  {  if(!window.ActiveXObject)//Mozilla,Safariz这个属性为假，IE78系列为真。  {  alert("浏览器是Mozilla,safari系列");  }else  {  alert('浏览器是IE7，IE8');  }  }else  {      alert('这个浏览器是IE6');  }  </script>   </head>   <body>     <div id="div1" class="style1">div1</div>          </body>