自己动手-使用this.id,this.className,this.style.classText,style

最新推荐文章于 2024-05-08 10:00:07 发布

macrotea

最新推荐文章于 2024-05-08 10:00:07 发布

阅读量235

点赞数

分类专栏： Javacript 文章标签： JavaScript XHTML CSS HTML ViewUI

本文链接：https://blog.csdn.net/macrotea/article/details/83741389

版权

Javacript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
#temp {
	height: 300px;
	width: 300px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0C0;
	border-right-color: #0C0;
	border-bottom-color: #0C0;
	border-left-color: #0C0;
	background-color: #0FF;
	
}
.test {
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0C0;
	border-right-color: #0C0;
	border-bottom-color: #0C0;
	border-left-color: #0C0;
	background-color: #0FF;
	
}
#aid {
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0C0;
	border-right-color: #0C0;
	border-bottom-color: #0C0;
	border-left-color: #0C0;
	background-color: #0FF;
	
}
#plzClick {
	background-color: #6CF;
	height: 200px;
	width: 200px;
}
</style>
</head>

<body>
<p><a href="#" οnclick="this.id='aid'">这里是大字体</a> </p>
<hr/>
<p><a href="#" οnclick="this.className='test'">这里是什么字体</a></p>
<hr/>
<div id="temp">测试一下字体</div>
<hr/>
<div id="plzClick">点击我吧</div>

<script type="text/javascript">
<!--
document.getElementById("temp").οnclick=function(){
	this.style.fontSize="30";
}
document.getElementById("plzClick").οnclick=function(){
	this.style.classText="height:400px;";//我做不出效果,路过的高手谁会,顺便说一声
}
//-->
</script>
</body>
</html>