.width( )
Добавлена в версию: 1.0
Описание:
Получает текущее значение ширины в пикселях для первого совпавшего элемента в наборе.
Разница между .css('width') и .width() в том, что в последнем возвращается значение без единицы измерения в пикселях (например, 400), в то время как в первом варианте возвращается значение с единицей измерения (например, 400px). Метод
.width() предпочтительней когда ширина элемента требуется для математических вычислений.
Начиная с jQuery версии 1.2 этот метод также позволяет находить ширину для объектов window и document.
$(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document
Пример
Показывает несколько значений ширины. Обратите внимание, что значения могут быть немного меньшими, чем Вы ожидали, поскольку значения берутся из фреймов. Желтый цвет показывает тело фрейма.
function showWidth(ele, w) {
$("div").text("The width for the " + ele +
" is " + w + "px.");
}
$("#getp").click(function () {
showWidth("paragraph", $("p").width());
});
$("#getd").click(function () {
showWidth("document", $(document).width());
});
$("#getw").click(function () {
showWidth("window", $(window).width());
});
Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function showWidth(ele, w) {
$("div").text("The width for the " + ele +
" is " + w + "px.");
}
$("#getp").click(function () {
showWidth("paragraph", $("p").width());
});
$("#getd").click(function () {
showWidth("document", $(document).width());
});
$("#getw").click(function () {
showWidth("window", $(window).width());
});
});
</script>
</head>
<body>
<button id="getp">Get Paragraph Width</button>
<button id="getd">Get Document Width</button>
<button id="getw">Get Window Width</button>
<div> </div>
<p>
Sample paragraph to test width
</p>
</body>
</html>
Описание: Устанавливает свойство ширины стиля CSS для каждого элемента в наборе.
.width( значение )
Добавлена в версию: 1.0
значение
Целое число представляет число в пикселях, или целое число с единицей измерения (как строка).
.width( function(индекс, ширина) )
Добавлена в версию: 1.4.1
function(индекс, ширина)
Функция, возвращающая ширину для установки. Принимает индекс-позицию элемента в наборе и старую ширину в качестве аргументов.
Когда вызывается .width(value),
значение может быть любое (число и единица измерения) или число.
Если только число передано в качестве значения, jQuery предполагает единицу измерения пиксель.
Если передана строка, тем не менее, только CSS правильного формата может использоваться для ширины (например, 100px,
50%, или auto).
Имейте в виду, что в современных браузерах свойство CSS не включает padding, border, или margin.
Если не было указано явного объекта (например, ‘em’ или ‘%’), тогда к указанному значению добавляется приставка «px».
Пример
При нажатии ЛКМ, изменяет ширину элемента div до 30px, а также изменяется цвет фона.Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div { width:70px; height:50px; float:left; margin:5px;
background:red; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").one('click', function () {
$(this).width(30)
.css({cursor:"auto", "background-color":"blue"});
});
});
</script>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>
Была ли эта информация полезной?
