This question is related to my previous question : How To Set Value In <style> ... </style> According To Browser Type Got From Javascript?
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 : http://gatecybertech.com/
On my site, the center image shifts a few pixels in IE when you mouse over it, but it works fine with other browsers.
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.
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
<!DOCTYPE html>
<html>
<head>
<title>Changing style</title>
<meta charset="utf-8" />
<style>
#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;}
</style>
<script type="text/javascript">
function getStyle(elem, cssprop, cssprop2)
{
if (elem.currentStyle) // IE
{
return elem.currentStyle[cssprop];
}
else if (document.defaultView && 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 && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 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 && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!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 -> left
alert(a.style); // How to reach and set the value of : " .pic-container-1 .pic-hover -> left " ?
}
</script>
</head>
<body>
<div id="elem" style="color: purple">
testing
</div>
<div id="localizejs">
<div class="content">
<div class="main">
<div class="container center">
<center>
<a href=http://gatecybertech.net>
<div id=pic-container-1 class="pic-container-1">
<div class="pic-box"><img src="http://gatecybertech.com/GATE_Frame_1.PNG" alt="GATE"></div>
<div class="pic-box pic-hover"><img src="http://gatecybertech.com/GATE_Frame_2.PNG" alt="GATE"></div>
</div>
</a>
<center>
</div>
</div>
</div>
</div>
</body>
</html>
So how to set the value at 600 [ for example ] for IE and 800 for all other browsers ?
