如何用JS封装一个可以获取与设置css中transform值的函数

最新推荐文章于 2024-09-28 17:32:53 发布

ClingJA

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： transform JavaScript CSS 前端封装

本文链接：https://blog.youkuaiyun.com/weixin_37632943/article/details/95377526

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用JavaScript封装一个函数，方便地获取和设置CSS中transform属性的值。通过示例代码，展示了如何设置如translateX、rotate等变换，并提供了读取特定变换属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何用JS封装一个可以获取与设置css中transform值的函数

通常我们在写js的时候，在需要对某个节点的css属性transform进行设置或读取时，正常情况要在js中进行拼接操作设置，比较麻烦，这时就需要去封装一个可以获取与设置css中transform值的函数。

为了方便理解，这里先创建一个盒子：

<div id="box"></div>

设置盒子的css属性：

#box {
      width: 200px;
      height: 200px;
      background: #9DC0D8;
}

*封装获取与设置css中transform值

*@param1 node 获取或设置的节点

*@param2 prop 获取或设置的属性

*@param3 value 设置的属性值（不需要带单位）

注：当传三个参数时，是设置transform值，当传前两个参数时，是获取transform的某个属性值。

设置transform值：

	var boxNode = document.querySelector('#box');

	function transformCss(node, prop, value) {
	
	// 如果第一次设置属性，给node添加属性
		if (node.transformData === undefined) {
			node.transformData = {};
		}
	//判断参数为三个值时,进行设置操作
	if (arguments.length > 2) {
		// 把属性和值添加到transformData中
		node.transformData[prop] = value;

		/*
		 *	transformData的值存储方式
		 *  {
		 *     'translateX': 100,
		 *     'roate': 10
		 *   }
		 * */

		// 遍历transformData
		var result = ''; // 声明一个空字符串存设置的transform值
		for (var i in node.transformData) {
			switch (i) {
				case 'translate':
				case 'translateX':
				case 'translateY':
					result += i + '(' + node.transformData[i] + 'px) ';
					break;
				case 'scale':
				case 'scaleX':
				case 'scaleY':
					result += i + '(' + node.transformData[i] + ') ';
					break;
				case 'rotate':
				case 'skew':
				case 'skewX':
				case 'skewY':
					result += i + '(' + node.transformData[i] + 'deg) ';
					break;
			}
		}
		// 设置transfrom属性值
		node.style.transform = result;
	}

读取transform值

	if (node.transformData[prop] === undefined) { // 如果取不到，设置默认值
		// 如果prop是scale系列，默认值是1， 其他transform属性的默认值都是0
		if (prop === 'scale' || prop === 'scaleX' || prop === 'scaleY') {
			var value = 1;
		} else {
			var value = 0;
		}
	} else { // 有值，拿到值给value
		var value = node.transformData[prop];
	}
	return value; //输出value

举例：

	transformCss(boxNode, 'translateX', 100);

	transformCss(boxNode, 'rotate', 10);

是给box设置transform: translateX(100px) rotate(10deg)；

	transformCss(boxNode, 'scale');

	transformCss(boxNode, 'translateX');

是读取box的transform属性中scale，translateX的值。