javascript基础练习-获取和设置行内样式

最新推荐文章于 2024-04-20 10:42:47 发布

wz前端初学者

最新推荐文章于 2024-04-20 10:42:47 发布

阅读量287

点赞数

分类专栏： javascript小练习文章标签：获取设置行内样式 javascript

本文链接：https://blog.csdn.net/wz13759497175/article/details/78759450

版权

javascript小练习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

效果图如下:

代码部分如下:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 100px;
			background: orange;
			margin: 0 auto;
			padding: 20px;
			color: white;
			transition: all 0.3s;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			var box=document.getElementById('box');
			var word=document.getElementById('word');
			var btn=document.getElementsByTagName("button");
			var text=document.getElementsByTagName("input");
			function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
			    if(obj.currentStyle){       //针对ie获取非行间样式
			        return obj.currentStyle[attr];
			    }else{
			        return getComputedStyle(obj,false)[attr];   //针对非ie
			    };
			};
			function get(name,value){
				if(arguments.length==1){   //当传入的实参只有一个时执行的操作 
					return getStyle(box,name);
				}else{
					box.style[name]=value;
				}
			}
			btn[0].οnclick=function(){
				word.innerHTML="当前容器的样式为:"+"<br/>"+text[0].value+":"+get(text[0].value);
			}
			btn[1].οnclick=function(){
				get(text[0].value,text[1].value);
			}
		}
	</script>
</head>
<body>
	请输入属性名:<input type="text" name="">
	<br/>
	请输入要设置的值:<input type="text" name="">
	<br/>
	<button>获取行间样式</button>
	<button>设置行间样式</button>
	<div class="box" id="box" >
		<div id="word"></div>
	</div>
</body>
</html>

wz前端初学者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础练习-获取和设置行内样式

效果图如下:代码部分如下: .box{ width: 300px; height: 100px; background: orange; margin: 0 auto; padding: 20px; color: white; transition: all 0.3s; } window.onload=fun
复制链接

扫一扫