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

最新推荐文章于 2021-06-19 07:08:15 发布

NS西北风

最新推荐文章于 2021-06-19 07:08:15 发布

阅读量878

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/huang2009303513/article/details/16943587

版权

html+css+js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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=="黑色")
			{
			    //获取div1
				var 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  οnmοusedοwn="test1(event)" οnmοusemοve="test2(event")>  -->
  <body>
        <input type="button" οnclick="test3()" value="显示当前时间"/>
        
        <div id="div1" style="width:400px;heigth:300px;background-color:red">div1</div>
        <input type="button"  value="黑色" οnclick="test4(this)"/>
        <input type="button"  value="绿色" οnclick="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="黑色" οnclick="test4(this)"/>
        <input type="button"  value="红色" οnclick="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>