JavaScript DHTML/jQuery/width
Содержание
Get width
<source lang="html4strict">
<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>
Set width to
<source lang="html4strict">
<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>
Set width with function
<source lang="html4strict">
<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>
width(): find the width of div
<source lang="html4strict">
$("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>
width(val): If no explicit unit was specified (like "em" or "%") then "px" is concatenated to the value.
<source lang="html4strict">
<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>