小白web进阶（七）

王子老师

于 2019-09-20 03:01:05 发布

阅读量85

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_37304462/article/details/101044104

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>js</title>
</head>
<style>
	#d1{
		height: 300px;
		width: 200px;
		background:blue;
	}
</style>
<body>

	1. js写在 script 标签里面
	<script type="text/javascript">
		alert('王子最帅对吧?老铁没毛病');
	</script>
	2. js写在外部的 js 文件内，然后引入
	<script src="1.js"></script>
	js修改元素内容
	<p id="d1">我就是我,王子殿下</p>
	<script>
		var change = document.getElementById('d1');
		change.innerHTML = '<h4> i love python </h4>';
	</script>


通过标签id获取元素
 <button id='d1' type="button"></button>
 <script>
 	var wangzi = document.getElementById('d1');
 	wangzi.onclick = function () {
 		alert('wizuomei')
 	}
 </script>

通过标签class获取元素
 <p class='d1'>wangzizimei</p>
 <p class='d1'>xiaxiashizhu</p>
 <script>
 	var aa = document.getElementsByClassName('d1');
 	aa[0].onclick = function () {
 		alert('wizuomei');
 	}
 </script>

通过标签名获取元素
<p >王子</p>
<p >殿下</p>
<p class="d1">最帅</p>
<script>
	var aa = document.getElementsByTagName('p');
	aa[0].onclick=function(){
		alert('晚安');
	}
</script>
通过name获取元素
<p name='wangzi'>i will success</p>
<script>
	var aa = document.getElementsByName('wangzi');
	aa[0].onclick=function(){
		alert('88');
	}
</script>
通过css选择器获取元素
<p id="d1">王子</p>
<p >殿下</p>
<p class="d11">最帅</p>
<p class="d11">最zui帅</p>
<script>
	获取一个元素的时候通过类标签不需要下标
	var aa = document.querySelector('.d11');
	aa.onclick=function(){
		alert('88');}
	获取 全部的时候类标签需要加下标
	var aa = document.querySelectorAll('.d11');
	aa[0].onclick=function(){
		console.log(aa);
		alert('88');
	}
</script>

<div id="d1">
	
</div>

<select id="s1">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</select>

<button type="button" id="haha">我是按钮好吗?</button>
<script>
	var aa = document.getElementById('haha');
	单击
	aa.onclick=function(){
		aa.innerText = 'wangzi';
	}
	双击
	aa.ondblclick=function(){
		aa.innerText = 'wangzi';
	}
	鼠标滑过
	var dd = document.getElementById('d1');
	dd.onmouseenter = function(){
		dd.style.background='red';
	}
	鼠标滑出
	dd.onmouseleave = function(){
		dd.style.background='black';
	}
	窗口改变
	window.onresize = function(){
		console.log('haha gaibianle');

	var aa = document.getElementById('s1');
	aa.onchange = function(){
		console.log('窗口发生改变了');
	}

	修改样式
	var aa = document.getElementById('d1');
	aa.onclick = function(){
		aa.style.height='1000px';
		aa.style.width='1000px';
		aa.style.background='green';
	}

	合法属性
	var aa = document.getElementById('d1');
	aa.className = 'wangzi';//增加
	aa.className = 'zhuzhu';//修改
	console.log(aa.className);//查询
	console.log(aa.id);//查询
	aa.removeAttribute('class');
	console.log(aa.className);//查询
	aa.removeAttribute('id');
	console.log(aa.id);//查询

	自定义属性
	aa.setAttribute('class',"xiaxia");//增加
	aa.setAttribute('class',"xiaxiashizhu");//修改
	console.log(aa.hasAttribute('id'));//查询
	aa.removeAttribute('class');
	console.log(aa.hasAttribute('class'));//查询



	
</script>
</body>
</html>

王子老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白web进阶（七）

<!DOCTYPE html><html><head> <title>js</title></head><style> #d1{ height: 300px; width: 200px; background:blue; }</style><body> 1....
复制链接

扫一扫

专栏目录