2013-06-25 5 views
0

Это похоже на работу в FF, Opera, IE (10), даже в хром, но сафари не будут иметь его?Почему Cant 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

I надеюсь, что это имеет смысл, я не смог найти ничего, что покрывало бы это вообще. Я даже просто переустановил Safari ...

Я понимаю, что это не очевидно, почему мне нужно достичь этого именно таким образом, но это потому, что я вырезал это раздражение из недр моего проекта и представили его как можно более просто.

какие у меня варианты?

EDIT; похоже, гораздо больше несовместимости в браузерах только немного старше ... см. мои комментарии.

Есть ли какой-то лучший способ, который я пропустил, чтобы динамически изменять весь класс элементов?

или просто целая куча элементов как-то?

+0

Какая ОС и версия Safari? Кроме того, почему вы пытаетесь изменить класс вместо простого изменения элемента? Какова ваша цель? – j08691

+0

привет, это окна 7 и Safari 5. – Wellie

+0

привет, это windows 7pro и Safari 5.1.7, я только что попробовал машину XPpro со следующими результатами; опера 11.60 и FF21.0 работа IE8, сафари 5.1.4 и хром 16.0.912.63 не ... так может случиться так, что существует слишком много несовместимости, чтобы действительно преследовать это? если я не получу что-то явно неправильно? – Wellie

ответ

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.