title: How To Adjust A Value In CSS from JavaScript?
body: <p>This question is related to my previous question : <a href="https://stackoverflow.com/questions/52063568/how-to-set-value-in-style-style-according-to-browser-type-got-from-java">How To Set Value In &lt;style&gt; ... &lt;/style&gt; According To Browser Type Got From Javascript?</a></p>
  
  <p>Someone suggested I use "CSS Vendor prefixes", so I tried, but it didn't work with IE, and my problem is with IE, you can see it from my site : <a href="http://gatecybertech.com/" rel="nofollow noreferrer">http://gatecybertech.com/</a></p>
  
  <p>On my site, the center image shifts a few pixels in IE when you mouse over it, but it works fine with other browsers.</p>
  
  <p>So I did some research and found a piece of code that shows me how to reach the properties in CSS from JavaScript and set a new value, and I've also found some code to detect browser, so if I combine them I can first detect if it's IE, if so, then I can reach the property I want and adjust its value.</p>
  
  <p>But the problem I have now is how to reach a complex property, like the one below in my sample code : .pic-container-1 .pic-hover -> left</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Changing style&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;style&gt;
      #elem
      {
        width: 200px; background-color: lime;
      }
      .pic-container-1{display:block; position:relative; }
      .pic-container-1 .pic-box{display:block;}
      .pic-container-1 .pic-box img{display:block;}
      .pic-container-1 .pic-hover{position:absolute; top:0px; left:866px; display:none;}
      .pic-container-1:hover .pic-hover{display:block;}
    &lt;/style&gt;
  
    &lt;script type="text/javascript"&gt;
      function getStyle(elem, cssprop, cssprop2)
      {
        if (elem.currentStyle)                                                   // IE
        {
          return elem.currentStyle[cssprop];
        }
        else if (document.defaultView &amp;&amp; document.defaultView.getComputedStyle)  // other browsers
        {
          return document.defaultView.getComputedStyle(elem, null).getPropertyValue(cssprop2);
        }
        else                                                                     // fallback
        {
          return null;
        }
      }
  
      window.onload = function ()
      {
        /*                                                                        // Code demo how to access CSS properties
         var elem=document.getElementById("elem");                                // setting and accessing style properties
  
         var color=getStyle(elem,"backgroundColor","background-color");
         alert(color);                                                            // rgb(0,255,0)
  
         elem.style.width="500px";
         elem.style.backgroundColor="yellow";
  
         alert(elem.style.width);                                                 // 500px
         alert(elem.style.backgroundColor);                                       // yellow
  
         elem.style["fontFamily"]="Courier";                                      // array notation
  
         var style=elem.getAttribute("style");                                    // demonstrating overwriting properties
         alert(style);                                                            // should display color: purple; width: 500px;
         // background-color: yellow;
  
         elem.setAttribute("style","height: 100px");
         var style=elem.getAttribute("style");
         alert(style);                                                            // now only displays height,resets styles
  
         var font=getStyle(elem,"fontFamily","font-family");
         alert(font);                                                             // default font family
         */
  
          // Opera 8.0+
          var isOpera = (!!window.opr &amp;&amp; !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') &gt;= 0;
  
          // Firefox 1.0+
          var isFirefox = typeof InstallTrigger !== 'undefined';
  
          // Safari 3.0+ "[object HTMLElementConstructor]" 
          var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
  
          // Internet Explorer 6-11
          var isIE = /*@cc_on!@*/false || !!document.documentMode;
  
          // Edge 20+
          var isEdge = !isIE &amp;&amp; !!window.StyleMedia;
  
          // Chrome 1+
          var isChrome = !!window.chrome &amp;&amp; !!window.chrome.webstore;
  
          // Blink engine detection
          var isBlink = (isChrome || isOpera) &amp;&amp; !!window.CSS;
  
          var output = 'Detecting browsers by ducktyping :\n===========================\n';
          output+='isChrome: '+isChrome+'\n';      // 57.8 % Market Share
          output+='isSafari: '+isSafari+'\n';      // 14.0 %
          output+='isFirefox: '+isFirefox+'\n';    // 6.0 %
          output+='isIE: '+isIE+'\n';
          output+='isEdge: '+isEdge+'\n';          // 5.9 %  IE + Edge
          output+='isOpera: '+isOpera+'\n';        // 3.7 %
          output+='isBlink: '+isBlink+'\n';
  
  //        alert(output);                                                       // Code demo how to detect browser
  
          if (isIE) 
          {
            // code here to adjust for IE
            // The images seem to work correctly [ overlapping each other when you mouse over them ] in this test html, but on my site I need to adjust a few pixels for IE
          }
  
  //    .pic-container-1 .pic-hover{position:absolute; top:0px; left:42px; display:none;}
  
        var a = document.getElementById("pic-container-1");
  //      var a = document.getElementById("pic-container-1.pic-hover");          // Doesn't work. Trying to get to prpperty : .pic-container-1 .pic-hover -&gt; left
        alert(a.style);                                                          // How to reach and set the value of : " .pic-container-1 .pic-hover -&gt; left " ?
  
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="elem" style="color: purple"&gt;
      testing
    &lt;/div&gt;
  
    &lt;div id="localizejs"&gt;
      &lt;div class="content"&gt;
        &lt;div class="main"&gt;
          &lt;div class="container center"&gt;
  
            &lt;center&gt;
              &lt;a href=http://gatecybertech.net&gt;
                &lt;div id=pic-container-1 class="pic-container-1"&gt;
                  &lt;div class="pic-box"&gt;&lt;img src="http://gatecybertech.com/GATE_Frame_1.PNG" alt="GATE"&gt;&lt;/div&gt;
                  &lt;div class="pic-box pic-hover"&gt;&lt;img src="http://gatecybertech.com/GATE_Frame_2.PNG" alt="GATE"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/a&gt;
            &lt;center&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So how to set the value at 600 [ for example ] for IE and 800 for all other browsers ?</p>