jquery-div가 높이 또는 CSS 속성을 변경하는지 확인하는 방법은 무엇입니까?
div가 높이 또는 CSS 속성을 변경할 때 이벤트를 트리거하는 방법을 알고 싶습니다.
id = 인 div가 mainContent있습니다. 높이가 변경되면 jquery가 자동으로 이벤트를 트리거하기를 원합니다. 나는 다음과 같이했다.
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
나는 그 잘못을 알고있다.
다음은 내 전체 코드입니다 (모르는 이유로 jsfiddle에 들어갈 수 없기 때문에 모든 코드를 붙여 넣었습니다).
<html>
<head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#separator {
border-right: 1px solid black;
}
</style>
<script type="text/javascript" src="jquery1.6.4min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("#separator").css('height', $("body").height());
});
$(function() {
$("#btnSample1").click(function() {
$("#mainContent").css('height', '400px');
$("#mainContent").css('width', '600px');
$("#mainContent").css('background-color', '#F0F0F0');
});
$("#btnSample2").click(function() {
$("#mainContent").css('height', '1600px');
$("#mainContent").css('width', '700px');
$("#mainContent").css('background-color', '#F0F0F0');
});
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
});
</script>
</head>
<body>
<table style="width: 100%;">
<tr>
<td valign="top" style="width: 19%;">
<table id="mainMenu">
<tr><td><input id="btnSample1" type="button" value="Sample 1" /></td></tr>
<tr><td><input id="btnSample2" type="button" value="Sample 2" /></td></tr>
</table>
</td>
<td valign="top" style="width: 1%;" >
<div id="separator"></div>
</td>
<td valign="top" style="width: 80%;">
<div id="mainContent"></div>
</td>
</tr>
</table>
</body>
</html>
높이가 변경 될 때마다 separator높이를 기준으로 div id =의 높이를 조정하려고합니다 .mainContentmainContent
추신 :이 경우 버튼 이벤트를 사용하여이 작업을 수행 할 수 있다는 것을 알고 있지만 높이가 변경 될 때 div가 이벤트를 트리거하기를 원합니다. 도와주세요. 미리 감사드립니다.
로, 자신의 하나 먼저, 그런 상자에서 이벤트를 CSS를-변경되지 않습니다 있습니다,하지만 당신은 만들 수 있습니다 onchange위한 :input요소 만. CSS 변경이 아닙니다.
CSS 변경 사항을 추적하는 방법에는 두 가지가 있습니다.
- x 시간 (예제에서는 500 밀리 초)마다 CSS 변경 사항에 대한 DOM 요소를 검사합니다.
- CSS 요소 를 변경할 때 이벤트를 트리거합니다 .
DOMAttrModified돌연변이 이벤트를 사용하십시오 . 하지만 더 이상 사용되지 않으므로 건너 뛰겠습니다.
첫 번째 방법 :
var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
if ($element.css('height') != lastHeight)
{
alert('xxx');
lastHeight = $element.css('height');
}
setTimeout(checkForChanges, 500);
}
두 번째 방법 :
$('#mainContent').bind('heightChange', function(){
alert('xxx');
});
$("#btnSample1").click(function() {
$("#mainContent").css('height', '400px');
$("#mainContent").trigger('heightChange'); //<====
...
});
CSS 변경을 제어하는 경우 두 번째 옵션은 훨씬 더 우아하고 효율적인 방법입니다.
문서 :
- 바인딩 :
Description: Attach a handler to an event for the elements. - 트리거 :
Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
Please don't use techniques described in other answers here. They are either not working with css3 animations size changes, floating layout changes or changes that don't come from jQuery land. You can use a resize-detector, a event-based approach, that doesn't waste your CPU time.
https://github.com/marcj/css-element-queries
It contains a ResizeSensor class you can use for that purpose.
new ResizeSensor(jQuery('#mainContent'), function(){
console.log('main content dimension changed');
});
Disclaimer: I wrote this library
For future sake I'll post this. If you do not need to support < IE11 then you should use MutationObserver.
Here is a link to the caniuse js MutationObserver
Simple usage with powerful results.
var observer = new MutationObserver(function (mutations) {
//your action here
});
//set up your configuration
//this will watch to see if you insert or remove any children
var config = { subtree: true, childList: true };
//start observing
observer.observe(elementTarget, config);
When you don't need to observe any longer just disconnect.
observer.disconnect();
Check out the MDN documentation for more information
Another simple example.
For this sample we can use 100x100 DIV-box:
<div id="box" style="width: 100px; height: 100px; border: solid 1px red;">
Red box contents here...
</div>
And small jQuery trick:
<script type="text/javascript">
jQuery("#box").bind("resize", function() {
alert("Box was resized from 100x100 to 200x200");
});
jQuery("#box").width(200).height(200).trigger("resize");
</script>
Steps:
- We created DIV block element for resizing operatios
- Add simple JavaScript code with:
- jQuery bind
- jQuery resizer with trigger action "resize" - trigger is most important thing in my example
- After resize you can check an browser alert information
That's all. ;-)
'IT TIP' 카테고리의 다른 글
| 주어진 그림에서 긴 / 위도를 픽셀 x / y로 변환 (0) | 2020.11.21 |
|---|---|
| Gson 및 배열이있는 객체 배열 역 직렬화 (0) | 2020.11.21 |
| Elixir의 디버깅 및 디버깅 도구? (0) | 2020.11.20 |
| Swagger UI의 파일 문제에서 읽을 수 없음 (0) | 2020.11.20 |
| pip 캐시 폴더는 어디에 있습니까? (0) | 2020.11.20 |