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

Question

我正在学习使用 Apache Cordova 创建应用程序。根据 phone 屏幕大小，我想创建一个具有特定 width/height 的 div 元素以在其中显示 google 地图。使用 javascript if/else 循环我设置了 css 样式偏好（宽度、高度等）。但是我怎样才能只显示一个 div 元素，其样式首选项从 javascript 到 HTML>

一些代码片段。这是为不同的占位符设置样式

#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 内。给出 div 和 "googleMap" 的 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);

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

Add only specific element to html body depending on javascript condition

html

javascript

css