行间样式及属性的基本操作

最新推荐文章于 2024-10-02 05:39:15 发布

刚好遇见小侯

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量339

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_61238657/article/details/122542792

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>通过输入数字改变DIV大小</title>

	<style type="text/css" >
		
		/*#hua2{width: 300px;}*/
	</style>
	<script type="text/javascript" >
		var num=0;
		window.onload=function(){
			hua.onclick=function(){
				num++;
				hua.innerHTML=num;
			};
			//hua2.style.width="300px";
			//cssText可以覆盖原有的css样式（！把之前的css完全覆盖）
			hua2.style.cssText="width:150px;height=150px"
			//getComputedStyle可以获取某元素的演示，行间非行间都可以获取到
			console.log(getComputedStyle(hua2).width);
			//getAttribute可以获取行间的属性，class id style及自定义属性
			console.log(hua2.getAttribute("abc"));
			//设置行间属性：ID class style 等,且可以覆盖原来属性
			hua2.setAttribute("class","hua1");
			//删除行间属性：
			hua2.removeAttribute("id");
			//判断行间属性是否有：
			hua2.hasAttribute("class");			
		};       
	</script>
</head>
<body>
	<xmp><div><span></span></div></xmp>
	<div id='hua' style="width: 100px;height: 100px;background: yellow;">1</div>
	<div id="hua2" abc=10 style="height: 100px;background: pink;"></div>
	
	
</body>
</html>