为什么不能用Safari来管理这种动态的cssStyle

这似乎在FF，Opera，IE（10），甚至Chrome中都能正常工作，但safari不会拥有它？为什么不能用Safari来管理这种动态的cssStyle

<html> <head> 

<style> .moveable_image {position:absolute; top:50px;} </style> 

<script type="text/javascript"> 
function move_image() { 
var image_top = 200 
document.styleSheets[0].cssRules[0].style.top = image_top; 
} </script> 

</head> <body> 
<input type='button' onClick='move_image()' value='move image'/> 
<img class="moveable_image" src="f/4thumb.jpg"> 

</body> </html>

它的工作原理是这样的：

document.styleSheets[0].cssRules[0].style.top = "200px"

但不是当它调用了一个 '变种'？

它的工作原理调用同一个变种，如果我（会）去名字路线：

document.images['moveable'].style.top = image_top;

，但我需要改变整个类

这里是现场：http://generationsinc.co.uk/test/safari_java_cssrule_test.html

我希望这是有道理的，我一直无法找到任何涵盖这一点的东西。我甚至只是重新安装了Safari ...

我意识到它不会很明显，为什么我需要以这种特殊的方式来实现这一点，但那是因为我已经把这种烦恼从我的项目的肠子里挖出来了，尽可能简单地呈现它。

我的选择有哪些人？

编辑;浏览器上的不兼容性似乎相当多，只是年龄稍大......请参阅我的评论。

有没有更好的方法，我错过了动态地改变整个类的元素？

或简单地一堆元素？

来源

2013-06-25 Wellie

什么操作系统和Safari的版本？另外，你为什么试图修改类而不是修改元素？你的目标是什么？ – j08691

你好，它是Windows 7和Safari 5. – Wellie

你好它是Windows 7pro和Safari 5.1.7，我刚刚尝试过XPpro机器，结果如下：歌剧11.60和FF21.0工作IE8，safari 5.1.4和铬16.0.912.63不......所以它可能是太多的不兼容性，以真正追求这一点？除非我明显有什么不对吗？ – Wellie

你可以使用jquery来设置css属性top: 200px;。看到这个代码 -

<!DOCTYPE html> 
<html> <head> 

<style> 
.moveable_image {position:absolute; width: 100px ; top:50px;} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
function move_image() { 
$('.moveable_image').css({"top":"200px"}); 
} </script> 

</head> <body> 
<input type='button' onClick='move_image()' value='move image'/> 
<img class="moveable_image" src="Tupils.jpg"> 

</body> </html>

这正在为IE，Chrome和Safari。

来源

2013-06-28 13:35:31 Sid

为什么不能用Safari来管理这种动态的cssStyle

回答

相关问题