Question

我有以下代码。我添加了最后一行，并在第3行添加了var mytest =，并希望将不透明度设置为0.3

var wrapper = document.createElement('div');
wrapper.classList.add('hotspot');
var mytest = wrapper.classList.add('info-hotspot');
mytest.style.opacity = 0.3;

不幸的是，在第4行出现以下错误。

TypeError：无法读取未定义的属性“样式”

在CSS中，我将不透明度定义为0.6，我想将其更改为0.3

有人得到建议或线索吗？

thx， Joost

Answer 1

classList是DOMTokenList，与documentation says一样，具有add方法，该方法返回undefined

您可能想要：

wrapper.style.opacity = 0.3;

Answer 2

改为使用此：

wrapper.style.opacity = 0.3;

mytest未定义，因为.add方法不返回任何内容

Answer 3

  function createInfoHotspotElement(hotspot) {

    
    // Create wrapper element to hold icon and tooltip.
    var wrapper = document.createElement('div');
    wrapper.classList.add('hotspot');
    wrapper.classList.add('info-hotspot');
   
    // Create hotspot/tooltip header.
    var header = document.createElement('div');
    header.classList.add('info-hotspot-header');

    // Create image element.
    var iconWrapper = document.createElement('div');
    iconWrapper.classList.add('info-hotspot-icon-wrapper');
    var icon = document.createElement('img');
    icon.src = 'img/info.png';
    icon.classList.add('info-hotspot-icon');
    iconWrapper.appendChild(icon);

    // Create title element.
    var titleWrapper = document.createElement('div');
    titleWrapper.classList.add('info-hotspot-title-wrapper');
    var title = document.createElement('div');
    title.classList.add('info-hotspot-title');
    title.innerHTML = hotspot.title;
    
    titleWrapper.appendChild(title);

    // Create close element.
    var closeWrapper = document.createElement('div');
    closeWrapper.classList.add('info-hotspot-close-wrapper');
    var closeIcon = document.createElement('img');
    closeIcon.src = 'img/close.png';
    closeIcon.classList.add('info-hotspot-close-icon');
    closeWrapper.appendChild(closeIcon);

    // Construct header element.
    header.appendChild(iconWrapper);
    header.appendChild(titleWrapper);
    header.appendChild(closeWrapper);

    // Create text element.
    var text = document.createElement('div');
    text.classList.add('info-hotspot-text');
    text.innerHTML = hotspot.text;

    // Place header and text into wrapper element.
    wrapper.appendChild(header);
    wrapper.appendChild(text);

    // Create a modal for the hotspot content to appear on mobile mode.
    var modal = document.createElement('div');
    modal.innerHTML = wrapper.innerHTML;
    modal.classList.add('info-hotspot-modal');
    document.body.appendChild(modal);
 
    var toggle = function() {
      wrapper.classList.toggle('visible');
      modal.classList.toggle('visible');
    };

    // Show content when hotspot is clicked.
    wrapper.querySelector('.info-hotspot-header').addEventListener('click', toggle);

    // Hide content when close icon is clicked.
    modal.querySelector('.info-hotspot-close-wrapper').addEventListener('click', toggle);

    // Prevent touch and scroll events from reaching the parent element.
    // This prevents the view control logic from interfering with the hotspot.
    stopTouchAndScrollEventPropagation(wrapper);

    return wrapper;
  }

css;

.info-hotspot {
  line-height: 1.2em;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
  opacity: 0.6;
}

Answer 4

这是您的热点结构吗？

html2canvas(document.querySelector("#topdf"), { 
      scale: 3, // use the desired scale
      allowTaint: true,
      useCORS: true
    }).then(canvas => { 

      // Your IMAGE_DATA_URI
      var imgData = canvas.toDataURL('image/jpeg');

      // Make pdf
      var doc = new jsPDF({ options });

      // add image
      doc.addImage(imgData, 'JPEG');

      // Save document
      doc.save('charts.pdf'); 

      // ....

这时，有两个问题：

1-您的代码仅将包装器的async asyncData({ $axios, params }) { try { newFolder = false let folder = {} if (params === '/new/folder') { newFolder = true } else { folder = await $axios.$get(`/folder/${params.id}/`) } return { folder, newFolder, } } catch (e) { return { folder: {}, newFolder: false, } } },插入到模式DIV中-应该是appendChild（）还是<div class="hotspot info-hotspot"> // wrapper variable <div class="info-hotspot-header"> // header variable <div class="info-hotspot-icon-wrapper"> //iconWrapper variable <img src="img/info.png" class="info-hotspot-icon"> // iconWrapper variable </div> <div class="info-hotspot-title-wrapper"> // titleWrapper variable <div class="info-hotspot-title"> // title variable (hotspot.title goes here) </div> </div> <div class="info-hotspot-close-wrapper"> // closeWrapper variable <img src="img/close.png" class="info-hotspot-close-icon"> // closeIcon variable </div> </div> <div class="info-hotspot-text"> // text variable (hotspot.text goes here) </div> </div> <div class="info-hotspot-modal"> // modal variable (contents of wrapper div - BUT ONLY THE CONTENTS) </div>，以便获得整个DIV及其内容？

2-该结构的哪一部分实际上需要不透明样式？

Answer 5

对我来说，你现在在做什么并不完全清楚，但这应该可行：

var wrapper = document.createElement('div');

wrapper.class='hotspot';

wrapper.style.cssText='opacity:0.3;';

document.body.appendChild(wrapper);

Javascript：无法设置属性样式的不透明度，TypeError：无法读取未定义的属性“样式”

5 个答案: