如何从JavaScript调整CSS中的值？
这个问题与我的上一个问题有关： 有人建议我使用“CSS供应商前缀”，所以我尝试了，但它不适用于IE，我的问题是IE，你可以从我的网站上看到： 在我的网站上，当你将鼠标移到IE的中心图像上时，它会移动几个像素，但在其他浏览器上也能正常工作 所以我做了一些研究，找到了一段代码，告诉我如何从JavaScript获取CSS中的属性并设置一个新值，我还找到了一些代码来检测浏览器，所以如果我将它们结合起来，我可以首先检测它是否是IE，如果是，那么我可以获取我想要的属性并调整它的值 但是我现在的问题是如何访问一个复杂的属性，就像我的示例代码中下面的一个：.pic-container-1.pic hover->left如何从JavaScript调整CSS中的值？,javascript,html,css,Javascript,Html,Css,这个问题与我的上一个问题有关： 有人建议我使用“CSS供应商前缀”，所以我尝试了，但它不适用于IE，我的问题是IE，你可以从我的网站上看到： 在我的网站上，当你将鼠标移到IE的中心图像上时，它会移动几个像素，但在其他浏览器上也能正常工作 所以我做了一些研究，找到了一段代码，告诉我如何从JavaScript获取CSS中的属性并设置一个新值，我还找到了一些代码来检测浏览器，所以如果我将它们结合起来，我可以首先检测它是否是IE，如果是，那么我可以获取我想要的属性并调整它的值 但是我现在的问题是如何访问
<!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>
改变风格
#元素
{
宽度：200px；背景色：石灰；
}
.pic-container-1{显示：块；位置：相对；}
.pic-container-1.pic框{display:block；}
.pic-container-1.pic框img{display:block；}
.pic-container-1.pic悬停{位置：绝对；顶部：0px；左侧：866px；显示：无；}
.pic-container-1:hover.pic hover{display:block；}
函数getStyle（elem、cssprop、cssprop2）
{
if（elem.currentStyle）//IE
{
返回元素currentStyle[cssprop]；
}
else if（document.defaultView&&document.defaultView.getComputedStyle）//其他浏览器
{
return document.defaultView.getComputedStyle（elem，null）.getPropertyValue（cssprop2）；
}
else//撤退
{
返回null；
}
}
window.onload=函数（）
{
/*//代码演示如何访问CSS属性
var elem=document.getElementById（“elem”）；//设置和访问样式属性
var color=getStyle（elem，“backgroundColor”、“backgroundColor”）；
警报（颜色）；//rgb（0255,0）
元素样式宽度=“500px”；
elem.style.backgroundColor=“黄色”；
警报（元素样式宽度）；//500px
警告（元素样式背景色）；//黄色
元素样式[“fontFamily”]=“Courier”；//数组表示法
var style=elem.getAttribute（“style”）；//演示覆盖属性
警报（样式）；//应显示颜色：紫色；宽度：500px；
//背景颜色：黄色；
元素setAttribute（“样式”，“高度：100px”）；
var style=elem.getAttribute（“style”）；
警报（样式）；//现在只显示高度，重置样式
var font=getStyle（元素，“字体系列”、“字体系列”）；
警报（字体）；//默认字体系列
*/
//歌剧8.0+
var isOpera=（！！window.opr&&！！opr.addons）| |！！window.opera | | navigator.userAgent.indexOf（'opr/'）>=0；
//火狐1.0+
var isFirefox=typeof InstallTrigger！=“未定义”；
//Safari 3.0+“[object HTMLElementConstructor]”
var isSafari=/constructor/i.test（window.HTMLElement）| |（函数（p）{return p.toString（）==“[object SafariRemoteNotification]”；}）（！window['safari']| safari.pushNotification）；
//Internet Explorer 6-11
var isIE=/*@cc_on！@*/false | |！！document.documentMode；
//边缘20+
var isEdge=！isIE&&！！window.StyleMedia；
//铬1+
var isChrome=！！window.chrome&&！！window.chrome.webstore；
//闪烁引擎检测
变量isBlink=（isChrome | | isOpera）和&！！window.CSS；
var output='通过ducktyping检测浏览器：\n======================================\n'；
输出+='isChrome:'+isChrome+'\n'；//57.8%的市场份额
输出+='isSafari:'+isSafari+'\n'；//14.0%
输出+='isFirefox:'+isFirefox+'\n'；//6.0%
输出+='isIE:'+isIE+'\n'；
输出+='isEdge:'+isEdge+'\n'；//5.9%IE+Edge
输出+='isOpera:'+isOpera+'\n'；//3.7%
输出+='isBlink:'+isBlink+'\n'；
//警报（输出）；//如何检测浏览器的代码演示
如果（isIE）
{
//此处代码用于调整IE
//在这个测试html中，这些图像似乎工作正常[当你把鼠标放在它们上面时，它们彼此重叠]，但在我的网站上，我需要为IE调整一些像素
}
//.pic-container-1.pic悬停{位置：绝对；顶部：0px；左侧：42px；显示：无；}
var a=document.getElementById（“pic-container-1”）；
//var a=document.getElementById（“pic-container-1.pic hover”）；//不起作用。正在尝试访问以下位置：.pic-container-1.pic hover->left
警报（a.style）；//如何达到并设置：“.pic-container-1.pic hover->left”的值？
}
测试
那么，如何将IE的值设置为600[例如]，将所有其他浏览器的值设置为800？您可以使用
styledocument.getElementByIdvar b = document.getElementsByClassName("pic-hover");
b[0].style.left = "800px";
检查的主要方法是使用用户代理字符串，该字符串并不总是可靠的。您可以检查某些功能。我