조건에 따라 JavaScript를 사용하여 CSS 스타일 값을 비교하려면 어떻게합니까?

빠른 질문이 있습니다. 왼쪽/오른쪽 값의 스타일을 다른 좌표와 비교하고 싶다면 어떻게해야합니까? 여기 조건에 따라 JavaScript를 사용하여 CSS 스타일 값을 비교하려면 어떻게합니까?

... 나는 마우스 좌표없이하지만 내 상태가 결코 실행되지 않습니다 어떤 이유로 뭘하려

<style> 
    #container 
    { 
     position:absolute; 
     left:400px; 
     top:200px; 
    } 
</style> 

<script> 
function moveExit(){  
    var containerId = document.getElementById("container").style; 

    if(containerId.left == 400 + "px") 
     containerId.left = 395 + "px"; 
} 
</script>

입니다 그리고 여기 내 몸이 내 첫 시간은 약 재생

<body> 
    <div id="container"> 
    <img 
    src="Images/image.jpg" 
    onmouseover="moveExit();" 
    /> 
    </div> 
</body>

자바 스크립트와 함께 .. 감사합니다!

출처

2013-07-30 Zain1291

문제의 일부는'document.getElementById ("container"). style'는 해당 요소의 실제'style' 속성에만 * only *을 적용합니다. 이 메소드를 사용하여 다른 곳에 설정된 CSS 속성 (예 : 여기에있는 것과 같은)은 표시되지 않습니다. 여기에서 가장 쉬운 방법은 jQuery의'.position()'메소드를 사용하여 좌표를 가져오고 설정하는 것입니다. –

@ChrisNielsen과 함께 jQuery와 같은 라이브러리를 살펴 보지 않았다면 자바 스크립트를 배울 때 그렇게하는 것이 좋습니다. 그러나 기억하십시오 .. jQuery는 마약과 같습니다 : 그것을 사용하십시오. 결코 그것을 남용하지 않으며 확실히 남용하지 마십시오. –

의견을 보내 주셔서 감사 드리며 남용하지 않는 jQuery 부분을 정말 좋아했습니다. D. 자바 스크립트에서 jQuery 변수를 사용할 수 있습니까? 그래서 클래스 P가 있다고 말하면서 position (.)으로 포지션을 얻은 다음 자바 스크립트 내의 조건을 사용하여 포지션을 바꾼다. – Zain1291

이 목적으로 계산 된 스타일을 사용해야합니다. IE8에 대한

var left = window.getComputedStyle(document.getElementById("container")).left

How do I get a computed style? 당신은 계산 된 스타일은 지원되지 않습니다 currentStyle proeprty을 사용해야합니다. 이 같은

document.getElementById("container").currentStyle.left

Cross-browser (IE8-) getComputedStyle with Javascript?

출처

2013-07-30 20:28:52 gaurang171

신난다, 그것은 일했다 : D! – Zain1291

ok 나는 clientX와 clientY에서 얻은 마우스 좌표를 비교하려고하는 다음 단계로 넘어 갔다. 하지만 다시 좌표를 비교할 수 없습니까? 다음과 같이 : \t if (left == mouse_x + "px") \t \t containerId.left = 200 + "px"; – Zain1291

시도 뭔가 :

http://jsfiddle.net/xtJA4/

$(document).ready(function() { 
    $("#container").mouseleave(function() { 
     if ($(this).css("left")=="400px") { 
      alert("Left = 400px"); 
     } 
    }); 
});

이이에 할 수 코스 변경,하지만 당신이 필요하고 무엇을해야 잘 작동합니다. 물론 alert() 함수를 변경하여 (왼쪽 오프셋을 수정하여) 필요한 것을 일치시킬 수는 있지만 잘하면이 도움이됩니다!

출처

2013-07-30 20:33:24

내가 정확히 무엇을 성취하고자하는지 확신 할 수는 없지만 다음은 몇 가지 의견과 코드 제안입니다.

사용자 자바 스크립트가 아니라 jQuery을 사용합니다. 이것은 David가 이전에 제안한 것입니다. jQuery의 가장 큰 장점 중 하나는 대부분의 브라우저 비 호환성 문제를 해결한다는 것입니다.

jQuery를 사용하여이 작업을 수행하려면 jQuery를 가져해야합니다, 그리고 당신과 같이 사용할 수 있습니다 :

<script type="text/javascript" src="./jquery/jquery.js"></script> 

<script type="text/javascript"> 
    function moveExit(){ 
     var $element = jQuery('#container'); 

     $element.css('left', '350px'); 
    } 
</script>

또한 내가 스크립트 요소에 "유형"속성을 추가 한 것을 알하시기 바랍니다.

사이드 노트에서 img 요소에 "alt"속성을 추가하라고 상기시켜줍니다. 접근성과 어떤 이유로 든 이미지가 차단 된 경우에 유용합니다.

더 나은 답변을 얻기 위해 무엇을 하려는지 더 잘 이해할 수 있습니다.

출처

2013-07-30 20:53:48 Sigh

안녕하세요, 답변 주셔서 감사합니다. 나는 div와 같은 컨테이너를 만들고 사용자가 마우스를 가져 가면 주위를 움직여서 자바 스크립트를 배우려고합니다. 현재 나는 그 운동을 성취하려고 노력하고 있습니다. 이제 마우스 좌표가 생겼지 만 이미지의 위치와 비교하려고합니다. 다시 한 번 감사드립니다! – Zain1291

조건에 따라 JavaScript를 사용하여 CSS 스타일 값을 비교하려면 어떻게합니까?

답변

관련 문제