时间戳

首页 > 解决方案 > 如何将背景图像放在 setAttribute 方法上？

javascript - 如何将背景图像放在 setAttribute 方法上？

问题描述

我正在制作一个简单的程序，可以均匀地切割圆圈。 在此处输入图像描述

我想用'setAttribute'方法把它放在图像上。但是，它不像我想的那样工作。

这是我的代码。

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
      *{margin:0; padding:0;}
    </style>
  <script>
    function elt(name, attributes){
      var node = document.createElement(name);
      if( attributes ){
        for(var attr in attributes){
          if(attributes.hasOwnProperty(attr)){
            node.setAttribute(attr,attributes[attr]);
          }
        }
      }
      for(var i=2; i<arguments.length; i++){
        var child = arguments[i];
        if( typeof child == "string" ){
          child = document.createTextNode(child);
        }
        node.appendChild(child);
      }
      return node;
    }
    
    window.onload=()=>{
      const IMG_W_COUNT = 50;
      const IMG_H_COUNT = 33;
      const IMG_SUM = 1650;

      for(var i=1,j=0;i<=IMG_SUM;i++,j+=18){
        var ImageSaver = elt("div",{
          class:"menu item"+i,
          width:18+"px",
          height:18+"px",
          background:"url('paint.jpg')",
          backgroundPosition:0+"px"+" "+j+"px"
      });
      document.body.appendChild(ImageSaver);
    }
  }
  </script>
</head>
<body>
</body>
</html>

elt 函数是一个有助于轻松生成元素的函数。我真的很感谢你的帮助。

标签： javascripthtmlcss

解决方案

background,height并且width不是属性（除了少数元素，它们大多已被弃用），也不是backgroundPosition.

setProperty在样式声明中使用函数设置 CSS 属性值。

确保使用 CSS 属性名称，而background-position不是backgroundPosition.

element.style.setProperty("name", "value");

推荐阅读