JavaScript 改变标签属性，和改变css属性

最新推荐文章于 2024-05-12 10:57:12 发布

houyanhua1

最新推荐文章于 2024-05-12 10:57:12 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/78468206

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

<!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" xml:lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>网页标题</title>
	<meta name="keywords" content="关键字列表" />
	<meta name="description" content="网页描述" />
	<link rel="stylesheet" type="text/css" href="" />
	<style type="text/css">
		#div1{
			background-color:red;
		}
	</style>
	<script type="text/javascript">
		function biangao(){
			var obj=document.getElementById("d1");
			var h = obj.height  
			obj.height=h+20;   //改变标签对象的属性 ，直接用obj.height
		}
		function biankuan(){
			var obj=document.getElementById("d1");  
			var w=obj.width;    //改变标签对象的属性 ，直接用obj.width
			obj.width=w+20;     //标签属性值，是数字时，直接+运算，不用parseInt()转成数字。
		}
		function biancolor(){
			var abc=document.getElementById("div1");   
			abc.style.backgroundColor="yellow";    //改变标签的css样式的属性值，用 obj.style.backgroundColor
			abc.style.fontSize="60px";         //在css中的font-size,background-color,在JavaScript中用 fontSize,backgroundColor
			abc.style.border="3px solid blue";  //css中的属性值，一般都是字符串。修改时可以用parseInt()转成数字。
			abc.style.margin="30px";
			abc.style.padding="30px";
		}
	</script>
</head>
<body>
<input type="button" value="点击变高" οnclick="biangao()" />
<input type="button" value="点击变宽" οnclick="biankuan()" />
<img src="images/022_avatar_big.jpg" width="200" height="250" id="d1" />
<div id="div1" οnclick="biancolor()">
	这是文字内容
</div>
</body>
</html>