Question

这似乎在FF，Opera，IE（10），甚至Chrome中都可以正常工作，但safari不会有它吗？

<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"

但不是在调用'var'时？

如果我（可以）去名称路线，它会调用相同的var：

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

但我需要改变整个班级

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

我希望这是有道理的，我根本找不到任何有关此事的内容。我甚至刚刚重新安装了Safari ......

我意识到为什么我需要以这种特殊方式实现这一目标并不明显，但那是因为我已经将这种烦恼从我项目的内容中剔除并尽可能简单地呈现出来。

我的选择是什么？

EDIT;在浏览器上似乎有更多的不兼容性，只有更老一点......看看我的评论。

有没有更好的方法让我错过动态更改整个元素类？

或者仅仅是一大堆元素？

Answer 1

您可以使用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。

为什么Safari无法管理这种动态的CSS样式

1 个答案: