CSSStyleDeclaration 保存dom元素的style

最新推荐文章于 2024-01-17 16:05:54 发布

阿豪boy

最新推荐文章于 2024-01-17 16:05:54 发布

阅读量263

点赞数

文章标签： js javascript python vue css

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064993

版权

原文链接: CSSStyleDeclaration 保存dom元素的style

上一篇: zsh 基本变量条件和循环

下一篇: zsh 实现 emcc_setup函数

可以用下面这个库转换对象格式为字符串格式

https://www.npmjs.com/package/to-style

const toStyle = require('to-style');

const style = {
  width: 100,
  height: '100px',
  'font-size': '12px',
};

const s = toStyle.string(style);
console.log('s', s);
const obj = toStyle.object(style);
console.log('obj', obj);

在使用animejs将dom元素变换后, 需要再次回复原位, 此时直接还原style对象是不行的, 需要使用cssText属性

每个都需要参数, 所以最简单的还是直接使用cssText

Method	Description
getPropertyPriority()	Returns whether or not the specified CSS property has the "important!" priority set
getPropertyValue()	Returns the value of the specified CSS property
item()	Returns the CSS property name from a CSS declaration block, by index
removeProperty()	Removes a CSS property from a CSS declaration block
setProperty()	Sets a new or modifies an existing CSS property in a CSS declaration block

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.0/anime.min.js"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: deepskyblue;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div style="left: 200px; top: 200px;" class="box" id="box"></div>

    <script>
      const box = document.getElementById("box");
      console.log(box.style);
      console.log(box.style.cssText);
      console.log(box.style.width);
      console.log(box.style.left);

      const oldStyle = { ...box.style };
      console.log("oldStyle", oldStyle);
      const oldStyleText = box.style.cssText;
      console.log("oldStyleText", oldStyleText);

      anime({
        targets: box,
        left: ["200px", "600px"],
        duration: 1000,
        delay: 0,
        complete:()=>{
            // 这样是不生效的
            // box.style = oldStyle
            box.style = oldStyleText
        }
      });
    </script>
  </body>
</html>