如何在js中操作样式

最新推荐文章于 2022-07-30 18:57:46 发布

Iukyxh

最新推荐文章于 2022-07-30 18:57:46 发布

阅读量1k

点赞数

文章标签：前端设计 css javascript

本文链接：https://blog.csdn.net/ukyhuang_xinyi/article/details/78826229

版权

很多网站都会有事件触发之后的样式变化，js中可以通过哪些方式改变容器的样式呢？

以下将用简单的盒子居中的例子在js事件中实现位置的变化，若要改变颜色、宽高等其他属性，

也是相同的道理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#wrapper {
				width:400px;
				height:200px;
				border:1px solid #DEB887; 
				margin: 100px auto;
				position: relative;
			}
			
			#wrapper #content {
				width:200px;
				height: 100px;
				border: 1px solid salmon;
				position: absolute;
			}
		</style>
	</head>
	
	<body>
		<div id="wrapper">
			<div id="content"></div>
		</div>
	</body>
	
	<script>
		var wrapper = document.getElementById("wrapper");
		var content = document.getElementById("content");
		var wrapperWidth = wrapper.offsetWidth;
		var wrapperHeight = wrapper.offsetHeight;
		var contentWidth = content.offsetWidth;
		var contentHeight = content.offsetHeight;
		var wrapperLeft = getStyleAttr(wrapper,"left");
		var wrapperTop = getStyleAttr(wrapper,"top");
		var contentLeft = getStyleAttr(content,"left");
		var contentTop = getStyleAttr(content,"top");
		
//		alert(wrapperWidth);    // 弹出值为402,加2px
		
		//获取当前容器的指定属性的函数
		function getStyleAttr(obj,attr){
			if(window.getComputedStyle){
				return parseFloat(window.getComputedStyle(obj)[attr]);
			}
			return obj.currentStyle[attr];
		}
		
//		alert(getStyleAttr(wrapper,"width"));  // 弹出值为300 
//		alert(getStyleAttr(wrapper,"height"));
		
		//如何利用键盘事件，按下W键就将content容器显示在wrapper的正中心位置呢？
		document.onkeyup = document.onkeydown = function(e){
			var event = window.event||e;
			var keyCode = event.which||event.keyCode;
			if(keyCode == 87){
				var x = wrapperLeft + wrapperWidth/2 - contentWidth/2;
				var y = wrapperTop + wrapperHeight/2 - contentHeight/2;
				content.style.left = x + "px";
				content.style.top = y + "px";
			}
		}
	</script>
</html>

原布局：

按下“W”键之后的效果：

注意：

1、offsetWidth会加上边框的像素值，getStyleAttr()返回值的不包括边框。

2、用“容器.style.属性”设置宽高等样式时，一定要加“px”,否则不生效。

Iukyxh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在js中操作样式

很多网站都会有事件触发之后的样式变化，js中可以通过哪些方式改变容器的样式呢？以下将用简单的盒子居中的例子在js事件中实现位置的变化，若要改变颜色、宽高等其他属性，也是相同的道理。 * { margin: 0; padding: 0; } #wrapper { width:400px; heigh
复制链接

扫一扫