DOM 像素缩放、像素放大 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      font-size: 16px;
      margin: 20px auto;
      padding: 1px 2px 0 3px;
      width: 200px;
      height: 300px;
      background-color: red;
      border-radius: 10px 15px 0 0;
      line-height: 1.5;
      box-shadow: 2px 2px 3px #aaaaaa;
      border: solid #000;
      border-width: 1px 2px 1.2px 0;
    }
  </style>
</head>

<body>
  <div id="main" class="container"></div>
  <div id="target" class="container"></div>
</body>

<script>
  const main = document.querySelector('#main', null);
  const computedStyle = window.getComputedStyle(main);

  // 比例
  const ratio = 0.5;

  const result = {};

  /*
    需要像素缩放
    computedStyle.fontSize => '16px'
  */
  const roster = [
    'fontSize',
    'lineHeight',
    'width', 'height',
    'left', 'right', 'top', 'bottom',
    // 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom',
    // 'marginLeft', 'marginRight', 'marginTop', 'marginBottom',
    // 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
    // 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius',
    // 'backgroundPositionX', 'backgroundPositionY'
  ];
  roster.forEach(k => {
    const item = computedStyle[k];
    if (item && /^-?\d+/.test(item) && !/\%/.test(item)) {
      result[k] = item.replace(/\d+(\.\d+)?/, (word) => word * ratio);
    }
  });

  /*
    需要特殊处理的像素缩放
    computedStyle.boxShadow => 'rgb(170, 170, 170) 2px 2px 3px 0px'
  */
  const special = ['boxShadow', 'padding', 'margin', 'borderWidth', 'borderRadius', 'backgroundPosition'];
  special.forEach(k => {
    const item = computedStyle[k];
    if (item && /-?\d+/.test(item)) {
      result[k] = item.split(' ').map(i => /^-?\d+(\.\d+)?/.test(i) && !/\%/.test(i) ? i.replace(/\d+(\.\d+)?/, (word) => word * ratio) : i).join(' ');
    }
  });

  console.log(result);
  /*
    {
      "fontSize": "8px",
      "lineHeight": "12px",
      "width": "100px", "height": "150px",
      "paddingLeft": "1.5px", "paddingRight": "1px", "paddingTop": "0.5px", "paddingBottom": "0px",
      "marginLeft": "424.5.5px", "marginRight": "424.5.5px", "marginTop": "10px", "marginBottom": "10px",
      "borderTopWidth": "0px", "borderRightWidth": "0px", "borderBottomWidth": "0px", "borderLeftWidth": "0px",
      "borderTopLeftRadius": "5px", "borderTopRightRadius": "7.5px", "borderBottomRightRadius": "0px", "borderBottomLeftRadius": "0px",
      "boxShadow": "rgb(170, 85, 85) 1px 1px 1.5px 0px"
    }
  */

  const target = document.querySelector('#target');
  const cssText = Object.keys(result).map(k => `${k.replace(/[A-Z]/g, (word) => `-${word.toLowerCase()}`)}:${result[k]};`).join('');

  console.log(cssText);
  /*
    font-size:8px;line-height:12px;
    width:100px;height:150px;
    padding-left:1.5px;padding-right:1px;padding-top:0.5px;padding-bottom:0px;
    margin-left:424.5.5px;margin-right:424.5.5px;margin-top:10px;margin-bottom:10px;
    border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;
    border-top-left-radius:5px;border-top-right-radius:7.5px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;
    box-shadow:rgb(170, 85, 85) 1px 1px 1.5px 0px;
  */

  target.style.cssText = cssText;

  // 已知问题
  /*
    比如： `margin: 0 auto;` 被转换成具体数值 `margin: 0px 284.5px`
  */

</script>

</html>

　　

posted @ 2022-02-16 17:08  .K_o  阅读(129)  评论(0)    收藏  举报