Få computed width på element ved DOM append - jQuery
Hej jeg har brug for at få width på et input element når den tilføjes til dokumentet via DOM.Dette er dog åbenbart ikke så lige til efter som man først kan få width når elementet er tilføjet til dokumentet.
Eksempel:
<!DOCTYPE html>
<html lang="da">
<head>
<title>Append test</title>
<!-- META Data -->
<meta charset="utf-8">
<!-- JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Script -->
<script type="text/javascript">
function passElement (elem) {
if ($(elem).width() == 200) {
elem.style.border = '1px solid green';
} else if ($(elem).width() == 0) {
elem.style.border = '1px solid red';
} else {
elem.style.border = '1px solid blue';
}
elem.value = 'width: '+ $(elem).width();
return elem;
}
jQuery.fn.extend({
append: function() {
return this.domManip(arguments, true, function( elem ) {
if ( this.nodeType === 1 ) {
if ( elem.nodeType === 1) {
elem = passElement(elem);
}
this.appendChild( elem );
}
});
}
});
</script>
<style type="text/css">
/* alle input elementer for bræden 200px */
input {
width: 200px;
}
</style>
</head>
<body>
<input type="text"><br>
<script type="text/javascript">
$(function () {
passElement(document.getElementsByTagName('input')[0]);
$('<input>')
.attr('type','text')
.appendTo('body');
});
</script>
</body>
</html>
Det er i orden af passElement først køres lige efter appendChild, bare alle input elementerne "for den grønne ramme".
