zoukankan      html  css  js  c++  java
  • js在HTML中的三种引用方式

    1.内联样式

    内联样式分为两种,一是直接写入元素的标签内部

    <html>
    	<title>js样式内联写法</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    	<body>
    	<!--js内联写法01开始-->
           <!--当鼠标点击图片时跳出弹窗显示1223-->
    		<div class="img">
    		单击事件:
    			<img src="images/001.jpg" onclick="alert(1223)"></img>
    		</div>
    	<!--js内联写法01结束-->
    	</body>
    </html>
    

     二是写入到<script></script>标签中

    给元素添加id

    通过getElementById('XX');方法定位到该元素,给该元素添加触发事件

    注意:<script></script>标签应该放在</body>之后

    <html>
    	<title>js样式内联写法</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    	<body>
    	<!--js内联写法02开始-->	
    	<div class="img">
    		单击事件:
    			<img src="images/002.jpg" id='yuansu'></img>
    	</div>
    	<!--js内联写法02结束-->
    	</body>
    	<script>
    		//js代码
    		//找到XX元素,一般给元素加id	
    		yuansuojb=document.getElementById('yuansu');		
    		//给xx元素加事件
    		yuansuojb.onclick=function(){
    			//代码段
    			alert(1);
    		}
    		//触发事件
    	</script>
    </html>
    

     2.外联样式

    将js的代码写到.js的文件中,并在HTML中引用

    .html文件内容如下:

    <html>
    	<title>js样式外联写法</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    	<body>
    	<div class="img">
    		外联写法--单击事件:
    			<img src="images/003.jpg" id='yuansu'></img>
    	</div>
    	</body>
    	<script src='js/index.js'></script>
    </html>
    

     .js文件内容如下:

    //js代码
    //找到XX元素,一般给元素加id	
    yuansuojb=document.getElementById('yuansu');		
    //给xx元素加事件
    yuansuojb.onclick=function(){
    	//代码段
    	var str="hello world !!!";
    	alert(str);
    }
    

     

  • 相关阅读:
    怎么把视频变小?
    Java使用HtmlUnit抓取js渲染页面
    范仁义css3课程---2、css代码引入方式
    范仁义css3课程---1、认识css样式
    width和max-width和min-width的区别
    CSS的盒子模型
    css选择器,伪类和伪元素的区别
    CSS选择器详解(总结)
    心得体悟帖---总结-191231(看似明悟)
    css3图片卡片效果
  • 原文地址:https://www.cnblogs.com/soulsjie/p/7634553.html
Copyright © 2011-2022 走看看