5_18javascript

最新推荐文章于 2024-07-12 16:27:40 发布

Bbilili

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量68

点赞数

分类专栏：学习文章标签： javascript

本文链接：https://blog.csdn.net/tt123_321/article/details/117034298

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset=";utf-8";>
		<title></title>
		<style>
			.test{
				background-color: #aaa;
			}
		</style>
	</head>
	<body>
		<div>
			<div class=";hezi";><img src=";./images/grass.png"; alt=";";></div>
			<input type=";text"; name=";"; id=";textip"; value=";"; />
	<!-- 		<input type=";password"; name=";"; id=";pass"; value=";"; />
			<input type=";image"; name=";"; id=";img"; value=";"; /> -->
			<input type=";button"; name=";"; id=";btn"; value=";点击"; />
			<p>姓名:房志权</p>
			<p>班级：19计算机应用s班</p>
			<p>星座：天秤座</p>
			<p>职务：吃货</p>
			<p class=";test";>座右铭：吃吃喝喝 快快乐乐</p>
			<p>爱好：吃喝玩乐</p>
			<p>偶像：浪味仙</p>
			<p>理想工作：试吃员</p>
			<p>最喜欢的一天：周末 因为能睡一天</p>
			<p>最有成就的事：一觉睡一天</p>
		</div>
		<script src=";./js/main.js"; type=";text/javascript"; charset=";utf-8";></script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset=";utf-8"; />
		<title></title>
	</head>
	<body>
			<input type=";text"; name=";"; id=";textip"; value=";"; />
			<input type=";button"; name=";"; id=";btn"; value=";点击"; />
		<script>
			//事件源 事件触发 事件函数
		
		</script>
	</body>
</html>

//操作元素内容
var p1=document.querySelectorAll(';p';);
p1[0].innerHTML=';<h3>姓名:房志权</h3>';;
p1[1].innerText=';<h3>班级：19计算机应用s班</h3>';;

//操作元素属性   哪个元素 哪个属性
//img src
//点击img img切换另一张图片
//再点击，切换回来原来的图片
var i=0;
var img=document.querySelector(';img';);
img.onclick=function  () {
	if(i==0){
	img.src=';./images/flower.png';;
	i=1;
	}
	else if(i==1)
	{
	img.src=';./images/grass.png';;
	i=0;
	}
}


var textip=document.querySelector(";#textip";);
var btn=document.querySelector(";#btn";);

btn.onclick=function(){
	textip.value=";房志权";;
}
//Style
p1[3].onclick=function(){
	p1[3].style.backgroundColor=";#748";;
}

//className 
p1[5].onclick=function(){
	p1[5].className=";test";;
}

var body=document.querySelector(';body';);
body.onclick=function(){
	//body.style.text-align=';center';;
	body.style.margin=';0 auto'; ;
	body.style.marginTop=';30px';;
	body.style.marginLeft=';40%';;
body.style.marginRight=';40%';;
}

Bbilili

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5_18javascript

<!DOCTYPE html><html> <head> <meta charset=";utf-8";> <title></title> <style> .test{ background-color: #aaa; } </style> </head> <body> <div> <div class=";hezi".
复制链接

扫一扫