如何使用 JavaScript 中的变量更改元素的边距？

Question

我是一个初学者，正在尝试学习 JavaScript。 我正在尝试改进 Popup 的示例。

我想调整弹出窗口的左边距，以便我可以将元素居中到文本。 我添加了 CSS 以供参考，但我正在尝试在 JS 中执行此操作。

基本上问题是如果我把代码放在下面，它就可以工作。

popup.style.marginLeft = "165px";

但是如果我用变量定义它并把它放在下面，它就行不通了。

popup.style.marginLeft = widthPopup;

我不知道我是否遗漏了什么。 我添加了下面的所有代码以供参考。

 function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); // what I tried to do for the solution // let widthPopup = document.createTextNode(popup.clientWidth / -2+"px"); // console.log(widthPopup); // popup.style.marginLeft = widthPopup; }

 * { font-family: "lato"; font-weight: 300; font-size: 17px; } /* Popup container */.popup { position: relative; display: inline-block; cursor: pointer; margin: 15em; } /* The actual popup (appears on top) */.popup.popuptext { visibility: hidden; width: 30ch; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; padding: 20px; } /* Popup arrow */.popup.popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class when clicking on the popup container (hide and show the popup) */.popup.show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*# sourceMappingURL=main.css.map */

 <div class="popup" onclick="myFunction()">Click me. <span class="popuptext" id="myPopup">Lorem ipsum dolor sit amet consectetur adipisicing elit, Delectus, modi magnam tenetur quo labore, nostrum debitis? facere velit nam suscipit error hic, Suscipit ab aspernatur eos rerum, odit quas, voluptatem velit amet quia. nesciunt possimus, Placeat ad suscipit quae ipsum vero voluptatem laboriosam? Labore perspiciatis accusantium reiciendis ex inventore temporibus, Est itaque a adipisci neque mollitia voluptas, tempora praesentium qui. Fuga facilis, ea, aliquam esse nostrum id architecto sit ipsum voluptates vel aspernatur voluptatibus. Molestiae adipisci libero eligendi expedita totam facilis obcaecati officiis voluptatibus magnam quia praesentium exercitationem perspiciatis ipsam impedit suscipit in, corrupti minima enim dolorum vel! Debitis, quaerat.</span> </div>

感谢您的任何帮助！

Answer 1

在您的示例（见下文）中，您尝试将边距设置为等于 TextNode，这不是有效值。

// what I tried to do for the solution
//      let widthPopup = document.createTextNode(popup.clientWidth / -2+"px");
//      console.log(widthPopup);
//      popup.style.marginLeft = widthPopup;

你正在寻找这样的东西。

function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");

      // let widthPopup = document.createTextNode(popup.clientWidth / -2+"px");
      let newMargin = popup.clientWidth / -2+"px";
      console.log(widthPopup);
      popup.style.marginLeft = newMargin;
    }

Answer 2

使用在变量中分配边距值

let marginValue = popup.clientWidth / -2+"px";

然后将该变量设置为弹出窗口的 margin-left 属性。

 function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); let marginValue = popup.clientWidth / -2+"px"; popup.style.marginLeft = marginValue; }

 * { font-family: "lato"; font-weight: 300; font-size: 17px; } /* Popup container */.popup { position: relative; display: inline-block; cursor: pointer; margin: 15em; } /* The actual popup (appears on top) */.popup.popuptext { visibility: hidden; width: 30ch; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; padding: 20px; } /* Popup arrow */.popup.popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class when clicking on the popup container (hide and show the popup) */.popup.show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*# sourceMappingURL=main.css.map */

 <div class="popup" onclick="myFunction()">Click me. <span class="popuptext" id="myPopup">Lorem ipsum dolor sit amet consectetur adipisicing elit, Delectus, modi magnam tenetur quo labore, nostrum debitis? facere velit nam suscipit error hic, Suscipit ab aspernatur eos rerum, odit quas, voluptatem velit amet quia. nesciunt possimus, Placeat ad suscipit quae ipsum vero voluptatem laboriosam? Labore perspiciatis accusantium reiciendis ex inventore temporibus, Est itaque a adipisci neque mollitia voluptas, tempora praesentium qui. Fuga facilis, ea, aliquam esse nostrum id architecto sit ipsum voluptates vel aspernatur voluptatibus. Molestiae adipisci libero eligendi expedita totam facilis obcaecati officiis voluptatibus magnam quia praesentium exercitationem perspiciatis ipsam impedit suscipit in, corrupti minima enim dolorum vel! Debitis, quaerat.</span> </div>