attributes.getNamedItem('style') 为 null

Question

下面的逻辑创建一个 div 元素，将图像显示为 base64 格式。当我尝试获取包含图像 URL base64 的属性

style

的值时，我收到此错误

attributes.getNamedItem('style') is null

。但我注意到，当我更新图像时，我可以获得属性

style

的值。你能告诉我是什么问题吗？

function clickEvent(event) {
  const target = event.target;
  if (target === null) return;
  this.childNodes.forEach(function(node) {
    if (node && node.nodeType === 1) {
      if (node !== target) return;
      node.children[1].click();
    }
  });
}

function changeEvent(event) {
  const target = event.target;
  if (target === null) return;
  this.childNodes.forEach(function(node) {
    if (node && node.nodeType === 1) {
      if (node.children[1] === target && event.target.files.length > 0) {
        thumbnail(node, event.target.files[0]);
      }
    }
  });
  console.log(target.parentNode.firstChild.attributes.getNamedItem("style").value);
}

function thumbnail(element, file) {
  if (element.children[0]) {
    element.children[0].nodeName === 'SPAN' ? createThumbnail(element, file) : updateThumbnail(element.children[0], file);

  }
}

function createThumbnail(element, file) {
  element.children[0].remove();
  const thumbnail = document.createElement("div");
  thumbnail.classList.add("drop-area__thumb");
  element.prepend(thumbnail);
  updateThumbnail(thumbnail, file);
  thumbnail.dataset.label = file.name;
  return element;
}

function updateThumbnail(element, file) {
  if (file.type.startsWith("image/")) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      element.style.backgroundImage = `url('${reader.result}')`;
    };
  } else {
    element.style.backgroundImage = null;
  }
}

function eventHandler(element, eventType, callback) {
  return document.getElementById(element).addEventListener(eventType, callback, false);
}

eventHandler('app', 'click', clickEvent);
eventHandler('app', 'change', changeEvent);

#app {
  display: inline-flex;
  padding: 24px;
  gap: 24px;
}

.drop-area {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #cccccc;
  cursor: pointer;
  box-sizing: border-box;
  background: #F8F8FF;
  padding: 8px;
  border: 2px dashed #cccccc;
  border-radius: 10px;
  position: relative;
  z-index: 999;
}

.drop-area__prompt {
  pointer-events: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-;
  size: 18px;
}

.drop-area__input {
  display: none;
}

.drop-area__thumb {
  position: absolute;
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  pointer-events: none;
}

<div id="app">
  <div id="1" class="drop-area">
    <span class="drop-area__prompt" style="pointer-events: none;">Upload file</span>
    <input type="file" accept="image/*" class="drop-area__input" name="upload">
  </div>
  <div id="2" class="drop-area">
    <span class="drop-area__prompt" style="pointer-events: none;">Upload file</span>
    <input type="file" accept="image/*" class="drop-area__input" name="upload">
  </div>
</div>

Answer 1

一般来说，浏览器需要一些时间来读取文件，这个时间取决于文件的大小和计算机的性能。为了解决这个问题，建议异步执行操作。

这是演示此方法的示例函数：

function changeEvent(event) {
    let target = event.target;
    if (target === null) return;
    
    this.childNodes.forEach(function(node) {
        if (node && node.nodeType === 1) {
            if (node.children[1] === target && event.target.files.length > 0) {
                thumbnail(node, event.target.files[0]);  
            }
        }
    });
    
    setTimeout(function() {
        // console.log(target.parentNode.firstChild.attributes.getNamedItem("style").value);
        console.log(target.parentNode.firstChild.getAttribute('style'))
    }, 500);
}

希望它能解决您的问题。