这个问题与我之前的问题有关:
How To Set Value In <style> ... </style> According To Browser Type Got From Javascript?
有人建议我使用“CSS供应商前缀”,所以我尝试了,但IE不起作用,我的问题是IE,你可以从我的网站上看到:
http://gatecybertech.com/
在我的网站上,当你将鼠标移到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呢?
