Question

我有几个嵌套在父div中的div。有一个功能，当我点击谷歌地图上的自定义按钮时，它会向右滑动一个div并在其左侧的另一个div中滑动。这样做可以将按钮移开屏幕并离开焦点，您可以在屏幕右下角访问它们。我试图解决这个问题的方法如下。设置负边距以将这些div拉回到焦点但它不起作用。

document.getElementById('alert-list').style.width = "403px";
document.getElementById('map-wrapper').style.marginLeft = "403px";
document.getElementById('mapBtns').style.marginLeft = "-403px";
document.getElementById('mapAds').style.marginLeft = "-205px";

“alert-list”是从左侧滑入的div。如上图所示，“map-wrapper”滑动到右侧403px，以便为div滑动到左侧（alert-list）腾出空间。当页面加载或您点击地图上的按钮时，所有这一切都很有效。我的问题是“mapBtns”“mapAds”，它嵌套在“map-wrapper”中。我开始对此进行故障排除并发现所有这些都嵌套在div调用“容器”中。 “mapBtns”“mapAds”嵌套在“map-wrapper”中。现在奇怪的是，当我在控制台中查看元素时，我可以看到javascript函数中的样式正在应用于那些div，因为我看到它内联但是，“ mapBtns“”mapAds“没有响应屏幕上的样式更改。

我还需要做些什么才能应用这些我缺少或不正确的样式吗？这是完整的功能。

function openAlerts() {
    document.getElementById('alert-list').style.width = "403px";
    document.getElementById('map-wrapper').style.marginLeft = "403px";
    document.getElementById('mapBtns').style.marginRight = "-403px";
    document.getElementById('mapAds').style.marginRight = "-205px";
}

修改

经过一些进一步的调查和排查后，我想我已经缩小了冲突的来源。只是不知道如何解决它，因为我没有使用javascript过期。在我的Google地图代码中，我将以下按钮放在地图上。其中覆盖了“mapBtns”定义的任何CSS。我只是不确定如何覆盖它。

// Load the map fullscreen collapse top button   
   var fullScreen = document.getElementById('fullscreen');
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(fullscreen);

        google.maps.event.addListenerOnce(map, 'tilesloaded', function() {$('#fullscreen').delay(1000).fadeIn("slow");});

   // Load the map control buttons     
    var mapControl = document.getElementById('controls');
         map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(mapControl);

         google.maps.event.addListenerOnce(map, 'tilesloaded', function() {$('#controls').delay(1000).fadeIn("slow");});

Javascript：如何设置子div的样式

0 个答案: