0

这似乎在 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 ......

我意识到为什么我需要以这种特殊的方式实现这一点并不明显，但那是因为我已经从我的项目的内部消除了这种烦恼，并尽可能简单地呈现它。

伙计们，我有什么选择？

编辑; 在稍旧的浏览器上似乎有更多的不兼容性......请参阅我的评论。

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

或者只是一堆元素？

4

1 回答 1

0

您可以使用 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-28T13:35:31.717 回答