js操作内联样式

最新推荐文章于 2024-06-09 19:30:00 发布

优价实习

最新推荐文章于 2024-06-09 19:30:00 发布

阅读量625

点赞数

文章标签： js html5 css javascript html

本文链接：https://blog.csdn.net/weixin_44828588/article/details/113870158

版权

JS修改css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color:red !important;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				/*
				 * 点击btn，修改BOX1的大小size
				 */
				//获取box1
				var box1=document.getElementById("box1");
				//获取按钮并绑定响应函数
				var btn1=document.getElementById("btn01");
				btn1.onclick=function(){
					/*
					 * 修改box1的大小
					 * 语法：
					 * 元素.style.样式名=样式
					 * css中，-是在js是、中不合法的，要将-变为驼峰命名法
					 * background-color变为backgroundColor
					 * 通过style修改的样式是内联样式，有较高的优先级，所以通过的js修改的
					 * 的样式会立即显示
					 * 方法：要在样式中写：！important，那么此时央视就会较高的优先级，即使js修改，也不会覆盖，这就会
					 * 导致js修改的样式失效，一般不要添加！important
					 */
					
					box1.style.width="400px";
					box1.style.height="400px";
					box1.style.backgroundColor="green";
					
					
				};
				var btn02=document.getElementById("btn02");
				btn02.onclick=function(){
						
						alert(box1.style.width);
				};
			}
		</script>
	<body>
		<button id="btn01">点击</button>
		<button id="btn02">获取信息</button>
	<div id="box1">
		
	</div>	
		
	</body>
</html>

结果
在这里插入图片描述

优价实习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js操作内联样式

JS修改css样式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color:red !important; }
复制链接

扫一扫