根据javascript条件，仅将特定元素添加到html正文

Question

我正在学习使用Apache Cordova进行应用创建。根据手机屏幕尺寸，我想创建一个具有特定宽度/高度的div元素，以在其中显示谷歌地图。 使用javascript if / else循环我设置了css样式首选项（宽度，高度等）。 但是，我如何只显示一个带有样式首选项的div元素，从javascript到HTML＆gt;

一些代码段。 这是为不同的占位符设置风格

#mapPlaceholder4S {
    height: 200px; 
    width: 200px;     
    margin-top:20px;     
    margin-bottom:20px;
}

#mapPlaceholder5S {
    height: 280px; 
    width: 280px;     
    margin-top:20px;     
    margin-bottom:20px;
}

这决定了使用哪个元素

if (screen.availHeight < 481) {
    alert("4S detected");
    map = new google.maps.Map(document.getElementById("mapPlaceholder4S"), mapOptions);
} else if (screen.availHeight > 481 &&  screen.availHeight < 569) {
    map = new google.maps.Map(document.getElementById("mapPlaceholder5S"), mapOptions);
}

如何只将其中一个占位符附加到我的html正文中，具体取决于执行的条件。我是HTML和CSS技术的新手。 我尝试使用javascript中的appendChild方法，但无法使其工作

Answer 1

您可以在JavaScript中使用setAttribute（）和removeAttribute（）方法。 您需要将地图放在div中。给出＆＃34; googleMap＆＃34;的div和id。

所以喜欢：

<div id="googleMap"  style="width:500px;height:380px;"></div>

然后，您可以执行以下操作：

所以喜欢：

.mapPlaceholder4S {
    height: 200px; 
   width: 200px;     
    margin-top:20px;     
    margin-bottom:20px;
    }
.mapPlaceholder5S {
    height: 280px; 
    width: 280px;     
    margin-top:20px;     
    margin-bottom:20px;
    }



if (screen.availHeight < 481) {
     alert("4S detected");
    document.getElementById("googleMap").setAttribute("id", "mapPlaceholder4S");
 } 
 else if (screen.availHeight > 481 &&  screen.availHeight < 569) {
       document.getElementById("googleMap").setAttribute("id", "mapPlaceholder5S");
 }

 map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);