如何在单击按钮时更改地图元素的高度?
How to change height of the map element on button click?
我想在单击按钮时来回删除样式,但是当我现在尝试调整大小时,地图在整个屏幕上呈现,但没有任何背景,只有上面的标记。
所以基本上我想删除样式并隐藏列表元素,只在一次单击时显示地图元素,然后在下一次单击时再次显示列表并调整地图最初的大小。
有什么想法吗?
**Updated**
**aura component**
<aura:component >
<aura:attribute name="map" type="Object"/>
<aura:attribute name="buttonstate" type="Boolean" default="false"/>
<div aura:id= "screen">
<div id="map" aura:id="mapSize" class="mapSize" style="position:relative;">
<lightning:button class="button" aura:id="buttonList" label="Button" onclick="{!c.handleClick}" />
</div>
</div>
<div aura:id="listDiv" class ="listDiv">
<c:List />
</div>
</div>
</aura:component>
**CSS**
.cAccountMap .mapSize{
width: 100%;
height: 80%;
}
.cAccountMap .mapTestSize{
height: 100%;
}
.THIS .listDiv{
height: 20%;
}
}
**Javascript**
handleClick : function(component,event,helper){
var buttonName = event.getSource();
var elements = document.getElementsByClassName("listDiv");
var buttonstate = component.get('v.buttonstate');
var cmpTarget = component.find('mapSize');
if(buttonstate==false){
buttonName.set('v.label', 'LALA');
elements[0].style.display = 'none';
$A.util.removeClass(cmpTarget, 'mapSize');
$A.util.addClass(cmpTarget, 'mapTestSize');
}else{
buttonName.set('v.label', 'gogo');
elements[0].style.display = '';
$A.util.addClass(cmpTarget, 'mapSize');
$A.util.removeClass(cmpTarget, 'mapTestSize');
}
component.set('v.buttonstate', !buttonstate);
}
After multiple tries i managed to find the solution
aura component is the same
css
.cAccountMap .mapSize{
width: 100%;
height: 65%;
}
.THIS .listDiv{
height: 35%;
}
.THIS .listHideDiv{
height: 0%;
}
Javascript
handleClick : function(component,event,helper){
var changeViewButton = event.getSource();
var listDiv = document.getElementsByClassName("listDiv");
var mapDiv = document.getElementsByClassName("mapSize");
var buttonstate = component.get('v.buttonstate');
var cmpList = component.find('listDiv');
if(buttonstate==false){
changeViewButton.set('v.label', 'lala');
listDiv[0].style.display = 'none';
mapDiv[0].style.height = '100%';
$A.util.addClass(cmpList, 'listHideDiv');
}else{
changeViewButton.set('v.label', 'gogo');
$A.util.removeClass(cmpList, 'listHideDiv');
listDiv[0].style.display = '';
mapDiv[0].style.height = '65%';
}
component.set('v.buttonstate', !buttonstate);
}
所以基本上地图高度样式从 javascript
我想在单击按钮时来回删除样式,但是当我现在尝试调整大小时,地图在整个屏幕上呈现,但没有任何背景,只有上面的标记。
所以基本上我想删除样式并隐藏列表元素,只在一次单击时显示地图元素,然后在下一次单击时再次显示列表并调整地图最初的大小。
有什么想法吗?
**Updated**
**aura component**
<aura:component >
<aura:attribute name="map" type="Object"/>
<aura:attribute name="buttonstate" type="Boolean" default="false"/>
<div aura:id= "screen">
<div id="map" aura:id="mapSize" class="mapSize" style="position:relative;">
<lightning:button class="button" aura:id="buttonList" label="Button" onclick="{!c.handleClick}" />
</div>
</div>
<div aura:id="listDiv" class ="listDiv">
<c:List />
</div>
</div>
</aura:component>
**CSS**
.cAccountMap .mapSize{
width: 100%;
height: 80%;
}
.cAccountMap .mapTestSize{
height: 100%;
}
.THIS .listDiv{
height: 20%;
}
}
**Javascript**
handleClick : function(component,event,helper){
var buttonName = event.getSource();
var elements = document.getElementsByClassName("listDiv");
var buttonstate = component.get('v.buttonstate');
var cmpTarget = component.find('mapSize');
if(buttonstate==false){
buttonName.set('v.label', 'LALA');
elements[0].style.display = 'none';
$A.util.removeClass(cmpTarget, 'mapSize');
$A.util.addClass(cmpTarget, 'mapTestSize');
}else{
buttonName.set('v.label', 'gogo');
elements[0].style.display = '';
$A.util.addClass(cmpTarget, 'mapSize');
$A.util.removeClass(cmpTarget, 'mapTestSize');
}
component.set('v.buttonstate', !buttonstate);
}
After multiple tries i managed to find the solution
aura component is the same
css
.cAccountMap .mapSize{
width: 100%;
height: 65%;
}
.THIS .listDiv{
height: 35%;
}
.THIS .listHideDiv{
height: 0%;
}
Javascript
handleClick : function(component,event,helper){
var changeViewButton = event.getSource();
var listDiv = document.getElementsByClassName("listDiv");
var mapDiv = document.getElementsByClassName("mapSize");
var buttonstate = component.get('v.buttonstate');
var cmpList = component.find('listDiv');
if(buttonstate==false){
changeViewButton.set('v.label', 'lala');
listDiv[0].style.display = 'none';
mapDiv[0].style.height = '100%';
$A.util.addClass(cmpList, 'listHideDiv');
}else{
changeViewButton.set('v.label', 'gogo');
$A.util.removeClass(cmpList, 'listHideDiv');
listDiv[0].style.display = '';
mapDiv[0].style.height = '65%';
}
component.set('v.buttonstate', !buttonstate);
}
所以基本上地图高度样式从 javascript