JavaScript Tutorial/jQuery/width — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:25, 26 мая 2010
Содержание
30. Get width
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").width(300); alert($("div").width());
}); </script> <style> div{ width:200px; height:100px; overflow:auto; } h1 { width:1000px;height:1000px; } </style> </head> <body> <body>
header 1
</body>
</html></source>
30. Set width to
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").width(300);
}); </script> <style> div{ width:200px; height:100px; overflow:auto; } h1 { width:1000px;height:1000px; } </style> </head> <body> <body>
header 1
</body>
</html></source>
30. Set width with function
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("div").css("width",function() { return $(this).width() + 20 + "px"; }); }); </script>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; }
</style>
</head> <body> <body>
</body>
</html></source>
30. width(): find the width of div
<source lang="javascript">
$("div.myElements").width(500) is identical to $("div.myElements").css("width","500px") <html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert( $("div").width());
}); </script>
<style>
div { width:50px; height:70px; float:left; margin:5px; background:rgb(255,140,0); cursor:pointer; }
</style>
</head> <body> <body>
</body>
</html></source>
30. width(val): If no explicit unit was specified (like "em" or "%") then "px" is concatenated to the value.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").one("click", function () { $(this).width(30) .css({cursor:"auto", "background-color":"blue"}); });
}); </script>
<style>
div { width:50px; height:70px; float:left; margin:5px; background:rgb(255,140,0); cursor:pointer; }
</style>
</head> <body> <body>
</body>
</html></source>