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」を呼び出しているときではありませんか？

名前ルートに行く（できた）場合、同じ変数を呼び出して動作します：

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 に答える