这个问题与我之前的问题有关：如何在<样式中设置值>...根据浏览器类型从 Javascript 获得？
有人建议我使用"CSS供应商前缀"，所以我尝试了，但它不适用于IE，我的问题与IE有关，您可以从我的网站看到它：http://gatecybertech.com/
在我的网站上，当您将鼠标悬停在 IE 上时，中心图像在 IE 中会移动几个像素，但它在其他浏览器上工作正常。
所以我做了一些研究，找到了一段代码，它向我展示了如何从 JavaScript 访问 CSS 中的属性并设置一个新值，我还找到了一些代码来检测浏览器，所以如果我将它们组合起来，我可以首先检测它是否是 IE，如果是这样，那么我可以到达我想要的属性并调整它的值。
但是我现在遇到的问题是如何访问一个复杂的属性，就像下面我的示例代码中的那样：.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>
那么如何将IE的值设置为600 [例如]，对于所有其他浏览器设置为800？
您可以使用style属性访问所选元素的样式(还有多种其他方法检查：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style 以获取更多信息(。此外，您不能将选择器与document.getElementById链接，但是您绝对可以使用jQuery来做到这一点。
var b = document.getElementsByClassName("pic-hover");
b[0].style.left = "800px";