JS elementary 2017-07-29

最新推荐文章于 2024-09-13 22:28:46 发布

CasvotLee

最新推荐文章于 2024-09-13 22:28:46 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/ledgewont/article/details/76304380

版权

1. 编程练习：

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<title>JAVASCRIPT</title>
		<script type="text/javascript">
		        function pro()
			{
				var choose=confirm("Are you sure?");    //是否打开输入框
				if(choose==true)                      //确定打开输入框
					{
						var url_input=prompt("input yes/no:","    http://www.imooc.com/");  //变量用于传送url到Windows.open
					 	window.open(url_input,"_blank","width=400","height=500","menubar=no","toolbar=no"); //设定打开的窗口的一些属性，无菜单栏，工具栏。
					}
				
			}
		
		</script>
	</head>
	<body>
		<center><input name="button"  type="button" onClick="pro()" value="click here"> </center>	
	</body>
</html>

2. 了解DOM（document object model）

DOC的作用是将HTML文件带有元素，属性，文本的树结构，也称之为节点树；

就像下面这样的，下面是一个由元素构成的树：

3. 通过ID获取元素

var get_element=document.getElementById("Your_Id");

注意：调用函数必须写document.func();

4. innerHTML 属性

这个元素用来获取或者替换HTML中元素的内容，

获取元素内容：

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

var info=get_message.innerHTML;              //info即为元素的内容

替换元素的内容：

get_message.innerHTML="hello world!";
var print=get_message.innerHTML;

注意：必须先进行更改内容，才能进行赋值等操作。

5. 使用JavaScript改变HTML的样式

<script>
var object=document.getElementById("your_id");
object.style.(color/backgroundColor/width..." new_style";
</script>

6. JavaScript中的隐藏和显示（display）

语法：

Object.style.display = value

实例：

<script>
var object=document.getElementById("id_name");
object.style.display="none/block";             //none表示隐藏，block表示块状显示。

</script>

7. 控制类名（classname）

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

语法：
object.className = "new_classname";

作用:
1.获取元素的class 属性

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

主要作用是添加类名或者修改类名。

8. JS 删除样式表

var obj=document.getElementById("id");

obj.removeAttribute('style');

9. 练习

<!doctype  html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<title>JS</title>
		<style type="text/css">
			#pro
			{
				width:900px;
				heght:100px;
				border:3px solid blue;
				text-align:center ;
				color:#151515; 
				background-color:#BCC7DB;
				display: block; 
				margin-left: 100px;"
	            text-align:center;
			}
			
		</style>
		<script type="text/javascript">
			function change_color()
			{
				var obj=document.getElementById("pro");
				obj.style.color="#0000FF";
                obj.style.backgroundColor="#B0C4DE"; 
			}
			
			
			function change_width()
			{
				var obj=document.getElementById("pro");
				obj.style.width="1000px";
                obj.style.height="300px"; 
			}
			
			function none()
			{
				var obj=document.getElementById("pro");
				obj.style.display="none";
			}
			
			function block()
			{
				var obj=document.getElementById("pro");
				obj.style.display="block";
			}
			
			function reset()
			{
				var obj=document.getElementById("pro");
				var judge=confirm("Reset or not?");
				if(judge==true)
					{
						obj.removeAttribute('style'); 
						
					}
				
			}
			
		</script>
	</head>
	
	<body>
	<div id="pro" >
	
	1.hello!<br/>
	2.world!<br/>
	3.hello!<br/>
	4.hello lee!<br/>
	
	</div>
	<br/>
<center>		 
<input name="button1" type="button" onClick="change_color()" value="change color" >
<input name="button2" type="button" onClick="change_width()" value="change width" >
<input name="button3" type="button" onClick="none()" value="none" >	
<input name="button4" type="button" onClick="block()" value="block" >
<input name="button5" type="button" onClick="reset()" value="reset" >
	</center>
	</body>
</html>