用于复杂CSS属性的Javascript API

我正在编写一些javascript代码，这些代码对DOM进行了严格的管理，我希望能够确信我的代码是高效的

我想知道是否有一个本地的、由浏览器提供的API允许javascript管理复杂的css属性？我对性能感兴趣，所以我希望使用尽可能原生的工具

如果我在任何网页上打开控制台，我可以键入并见证以下内容：

>>> window.document.body.style.transform = 'translate(0, 0)';
"translate(0, 0)"
>>> window.document.body.style.transform
"translate(0px, 0px)"

显然，

style.transform

属性不是一个简单的属性，因为它将

0

重新格式化为

0px

。但是

style.transform

属性的值是一个简单的字符串

是否有用于管理复杂css属性（如

transform

）的API

像下面这样的

>>> var elem = document.getElementById('some-id');
>>> elem.style.niceTransform.translate
null
>>> elem.style.niceTransform.rotate
null
>>> elem.style.niceTransform.scale
null
>>> elem.style.niceTransform.translate = 'transform(10, 20, 30)';
>>> elem.style.niceTransform.translate
CSSTransformTranslate { x: 10, y: 20, z: 30 }
>>> elem.style.niceTransform.translate.y += 20;
>>> elem.style.niceTransform.translate
CSSTransformTranslate { x: 10, y: 40, z: 30 }

显然，我发明了

nicetransformtranslate

属性和

cstransformtranslate

类。浏览器是否为javascript提供了用于管理复杂css属性的api？如果是这样，我可以得到这样的文件链接吗

---

谢谢

CSS3本机支持转换 您可以通过javascript在样式表中添加/修改必要的规则

---

由于您大量操作DOM，我还建议您使用JQuery，因为它是众所周知的，并且经过了很好的优化。

不，样式属性都是字符串；它们只接受一个字符串，因此如果您想要这样的API，您必须自己创建它，跟踪所有属性的状态，然后在进行更改时设置转换字符串

也就是说，在这方面也有相似之处。CSSMatrix本身已经被弃用，它有供应商前缀的版本，还有一个更新的DOMMatrix…有点乱。我确实看到至少有一个，但我从未使用过，所以请您自己尝试

---

但矩阵的好处在于，在JS中，可以将当前变换作为矩阵，对该矩阵应用倾斜/旋转/平移，然后将变换属性设置为更新后的矩阵。我想，这正是你想要的；您只需根据所需的浏览器支持来决定实现它是否值得。

您能澄清一下您所说的

复杂css属性是什么意思吗？根据“长度值（在本规范中由表示）的格式为a（带或不带小数点），后跟单位标识符（如px、em等）。长度为零后，单位标识符是可选的。”这可能会有所帮助，祝您好运！例如，
font-style
不是一个复杂的属性。
字体样式
属性没有子属性；它只是一个内联字符串，例如
“serif”
或“
无衬线”
。但是
变换
属性很复杂-它具有
缩放
、
平移
和
旋转
属性，并且这些组件中的每一个都有进一步的子属性。（例如，
transform
具有
x
、
y
和
z
属性）。您正在查找。我不确定CSSOM链接对操作复杂的css属性有何评论！如果有，或者因为不存在这样的东西而没有，请发布一个答案：）我在寻找一个javascript API，而不是css！我要说的是使用javascript来设置CSS。你有什么理由希望javascript api优于css/html吗？您应该尽量减少javascript以减少加载时间，因为javascript库无论如何都会编辑CSS。设置转换与堆叠转换是非常不同的事情，我认为OP要求的是后者。前者非常简单，后者则不然。我希望以面向对象的方式管理
transform
属性。目前我不知道有什么方法可以访问
transform.translate.x
属性。如果我想更改元素的
x
位置，我需要设置整个
transform
属性。基本上，我问我的问题是为了确定是否可以避免设置整个
transform
属性，并直接向下钻取
transform.translate.x
属性。