计划七天-----学习JavaScript核心DOM BOM操作（界面交互功能）-----第二天（1）

程序员文章站 2022-06-06 15:59:21

...

继续JavaScript核心DOM BOM操作的学习——第二天

所有的代码里的照片都是我在网上找的或者自己服务器里上传的，大家可以直接复制我的代码进行操作，部分代码需要自己补充head标签后，才可以正常使用，大多可以直接嵌入在html标签内使用

操作元素

<html>
<body>
	<div>
	</div>
	<img src="" title="">
	<script>
		var img = document.querySelector('img');
		var congra = document.querySelector('div');
		var date=new Date();
		//切记必须进行new
		var min=date.getMinutes();
		if(min >=30){
			img.src='http://www.07073.com/uploads/100819/11_102329_2.png';
			img.title="战神盖亚祝你后半小时好";
			congra.innerText='战神盖亚祝你后半小时好';
		}
		else{
			img.src="https://iknow-pic.cdn.bcebos.com/267f9e2f07082838070912c3be99a9014d08f1e5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1";
			img.title="雷神雷伊祝你前半小时好";
			congra.innerText="雷神雷伊祝你前半小时好";
		}
	</script>
</body>
</html>

3.表单元素的属性操作

表单元素的属性：type、value、checked、selected、disabled

value：表单里面的内容是通过属性value来修改的
disabled：某个表单被禁用，不能被点击
type：表单的类型

<body>
	<input type="text" value="请您输入">
	<button id="submit">
		提交
	</button>
	<script>
		var btn=document.querySelector('#submit');
		var input = document.querySelector('input')
		btn.onclick=function(){
			input.value="输你个麻花屁";
			this.disabled=true;
			//按钮被禁用了
			//this指的是事件函数的调用者，这里指的是btn
			this.type='password';
			//文本被隐藏了
		}
	</script>
</body>

4.样式属性操作

①修改元素的大小、颜色、位置等样式

<body>
	<div style="width:200px;height:200px;background-color:red;color:pink">
		hello world
	</div>
	<script>
		var test=document.querySelector('div')
		test.onclick=function(){
			this.style.backgroundColor='pink';
			this.style.width='400px'
			this.innerHTML='<div style="color:black">你好，世界</div>'
		}
	</script>
</body>

②循环精灵图：
内部图片选自我自己的网站上传的照片，各位如果没有自己的站点，可以先将照片通过书的照片的形式上传，再通过抓包的形式将图片的地址抓过来


<style type="text/css">
 .box{
  width: 370px;
  margin: auto;
 }
 .box li{
  float:left;
  height: 158px;
  width: 88px;
  margin-right: 22px;
  margin-top: 33px;
  background-color: red;
  list-style:none;
  background: url('http://www.booksam.cn/sourses/Book/40.jpg'
) no-repeat;;
 }
</style>
<body>
 <div class="box">
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 </div>
 <script>
  var test = document.getElementsByTagName('li');
  for(var i=0;i<3;i++){
   for (var j = 0; j < 3; j++) {
    test[i*3+j].style.backgroundPosition='-'+110*j+'px -'+191*i+'px';
   }
  }
 </script>
</body>

③显示隐藏文本框内容
鼠标点进去输入框，里面的文字消失，当没有输入内容时，鼠标点击外面，恢复里面的文字

<body>
	<input value='hello world' type='text'>
	<script>
		var text=document.querySelector('input');
		text.onfocus=function(){
			this.value='';
		}
		text.onblur=function(){
			if(this.value==''){
				this.value='hello world';
			}
		}
	</script>
</body>

④通过className更改元素样式(当需要修改的样式较多时)
如果修改的样式较少，可以直接使用this.style.element进行修改

<style type="text/css">
 .test{
  width: 500px;
  height: 300px;
  font-size: 100px;
  text-align: center; 
  background-color: red;
  color: black;
 }
</style>
<body>
 <div>
  点击变身
 </div>
 <script>
  var test=document.querySelector('div');
  test.onclick=function(){
   this.className='test';
  }
 </script>
</body>