Question

我正在使用javascript在dom中添加元素。我添加了一个使用insertBefore（）将其放置在移动视图上所需的位置。但是应该在桌面上将其放置在网站上的其他空间中。我该如何解决？

由于我已经无法移动的元素已经存在，因此仅使用CSS是不可行的。

    var priceWrapper = document.querySelector('.price-info-wrap')
    var mainContainer = document.querySelector('.price-info')
    var addUrgency = document.getElementById('urgency')
    priceWrapper.insertBefore(addUrgency, mainContainer)

提供的代码是我放置“ addUrgency”巫婆的方式，它是我需要在桌面上其他位置放置的div。

Answer 1

您可以做到，但这不是一个好主意。

从所需的最小屏幕宽度开始布局元素，然后使用CSS Media queries从那里向外进行调整，以根据需要在特定的屏幕宽度上调整布局。

在这种情况下，如果您无法通过其他任何方式进行操作，则可以将两个元素放在您喜欢的位置，然后根据视口宽度进行显示/隐藏。像这样：

@media (min-width:800px)  { 
   //your non-mobile styles and classes go here
   .desktop-element{
      display: inline-block;
   }
   .mobile-element{
      display:none;
   }
}

Answer 2

您可以使用navigator.userAgent来确定浏览器是否是移动浏览器。在StackOverflow上执行此操作时，还有一个很好的答案：Detecting a mobile browser

另一个选择是使用javascript检查视口大小。如果您有响应视口大小的css规则，例如@media (width)：

，这可能是一个更好的解决方案

let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

在那之后，很简单的if-else决定放置元素的位置。

Answer 3

您可以使用onresize事件。但是，我必须指出，在DOM的正确位置有两个相同的元素（也许使用clone（）复制#addUrgency），并使用CSS媒体查询而不是使用Javascript重新放置每个元素来显示/不显示它们调整视口大小是一个更好的解决方案。但是，在这里回答您的问题是使用代码最直接的方法。还需要注意的是，调整大小事件可以很快触发，因此您可能希望限制功能继电器（答案在StackOverflow上）。

function relay(){
    var addUrgency = document.getElementById('urgency');
    if(`mobile view`){ //here goes a condition to determine what view you have. 
         var priceWrapper = document.querySelector('.price-info-wrap');
         var mainContainer = document.querySelector('.price-info');
         priceWrapper.insertBefore(addUrgency, mainContainer);
    }else{
         // Insert where you want it on desktop view
    }
}
window.onload = function() {
    relay();
    document.body.addEventListener("resize", relay);
};

我可以使用javascript将一个元素放置在不同的位置，一个放置在移动设备上，另一个放置在桌面上吗？

3 个答案: