2013-06-25 2 views
0

FF, Opera, IE (10), Chrome에서도 괜찮은 것 같지만 사파리에는 없습니다.Safari가이 동적 cssStyle을 관리하는 이유

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

을하지만, 그것은 'VAR를'부르고하지 않을 때 :

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

는 다음과 같이 작동?

그것이 내가 이름 경로 이동 (수) 경우 같은 VAR를 호출 작동합니다

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

을하지만 전체 클래스를 변경할 필요가 여기

는 라이브입니다 : http://generationsinc.co.uk/test/safari_java_cssrule_test.html

I 이것이 의미가 있기를 바란다면, 나는 이것을 전혀 다루지 않는 어떤 것을 찾을 수 없었습니다. 나는 방금 사파리를 다시 설치했다. ...

나는이 특별한 방법으로 이것을 달성해야하는 이유가 분명하지 않다는 것을 깨닫는다. 그러나 그것은 내 프로젝트의 장에서이 성가심을 조각 냈기 때문이다. 가능한 한 간단하게 제시했다.

내 옵션 사람들은 무엇입니까?

EDIT; 조금 더 오래된 브라우저에 비해 더 많은 비 호환성이있는 것 같습니다. 내 의견을보십시오.

요소의 전체 클래스를 동적으로 변경하는 데 더 좋은 방법이 있습니까?

또는 간단히 말해서 모든 요소가 어딘지?

+0

Safari의 어떤 OS 및 버전입니까? 또한 왜 요소를 수정하는 대신 클래스를 수정하려고합니까? 당신의 목표는 무엇입니까? – j08691

+0

안녕하세요, 윈도우 7과 사파리 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에서 작동합니다.

관련 문제