在事件上移动 openlayers 缩放工具

Question

Trying to reproduce something similar to Openlayers with sidebar where once the sidebar is expanded the .ol-zoom margin-left is modified to change its position but I can't use jquery in my project, so looks for Vanilla JS or Angular based solution.

I saw that its quiet easy to change position of the openlayers Zoom buttons as answered here but I would like to change the position on some event trigger like a (sidebar-toggle button) button click.

Thanks

Answer 1

In JS you can dynamically add css to the application, for example

    var css =
        '.menuSeparator {' +
        '    border-bottom: solid 1px black;' +
        '}';

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet){
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    head.appendChild(style);

Answer 2

Here is my solution

const olZoom = document.getElementsByClassName("ol-zoom");
const sideBarElements = document.getElementsByClassName("sidebar-left");
if(!this.sidebarVisibility) {
  (olZoom[0] as HTMLElement).style.marginLeft = "0px";
  (olZoom[0] as HTMLElement).style.marginTop = "60px";
} else {
  setTimeout(() => {
    (olZoom[0] as HTMLElement).style.marginLeft = ((sideBarElements[0] as HTMLElement).offsetWidth - 10) + 'px';
    (olZoom[0] as HTMLElement).style.marginTop = "0px";
  }, 50);
}

major issue what I was facing was that I wasn't casting Element to HTMLElement in typescript as explained here which was blocking me to apply my margin style