CSS đặt chiều rộng dựa trên phần tử khác

Question

Sự khác biệt giữa


html>
 Nội dung chính Show
 Ghi chú bổ sung
.width( value )Trả về. jQuery
Làm cách nào để đặt chiều rộng của div theo nội dung?
Chiều rộng tự động trong CSS là gì?
Chiều rộng được tính như thế nào trong CSS?
Tôi có thể sử dụng tối đa không
 
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

3 và


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4 là giá trị sau trả về giá trị pixel không có đơn vị (ví dụ:


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

5) trong khi giá trị trước trả về giá trị còn nguyên đơn vị (ví dụ:


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

6). Phương pháp


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4 được khuyến nghị khi chiều rộng của phần tử cần được sử dụng trong phép tính toán học

CSS đặt chiều rộng dựa trên phần tử khác

Hình 1 - Minh họa chiều rộng đo được

Phương pháp này cũng có thể tìm thấy chiều rộng của cửa sổ và tài liệu

1

2

3

4

5


// Returns width of browser viewport
$( window ).width();
 
// Returns width of HTML document
$( document ).width();

Lưu ý rằng


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4 sẽ luôn trả về chiều rộng nội dung, bất kể giá trị của thuộc tính CSS


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>



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>
 
body>
html>

9 là gì. Kể từ jQuery 1. 8, điều này có thể yêu cầu truy xuất thuộc tính chiều rộng CSS cộng với thuộc tính


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

9 và sau đó trừ đi bất kỳ đường viền và phần đệm tiềm năng nào trên mỗi phần tử khi phần tử đó có


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

1. Để tránh hình phạt này, hãy sử dụng


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

3 thay vì


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4

Ghi chú. Mặc dù các thẻ


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4 và


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

5 sẽ báo cáo giá trị cho


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4 hoặc


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

7 khi được định vị tuyệt đối và được cung cấp


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

8, nhưng chúng tôi đặc biệt khuyên bạn nên gọi các phương thức đó trên các thẻ này. Ngoài việc là một thông lệ xấu, kết quả cũng có thể không đáng tin cậy

Ghi chú bổ sung

Số được trả về bởi các API liên quan đến thứ nguyên, bao gồm cả


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4, có thể là phân số trong một số trường hợp. Mã không nên cho rằng nó là một số nguyên. Ngoài ra, các kích thước có thể không chính xác khi người dùng thu phóng trang;

Giá trị được báo cáo bởi


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4 không đảm bảo chính xác khi phần tử hoặc phần tử gốc của nó bị ẩn. Để có được giá trị chính xác, hãy đảm bảo phần tử hiển thị trước khi sử dụng


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

4. jQuery sẽ cố gắng hiển thị tạm thời và sau đó ẩn lại một phần tử để đo kích thước của phần tử đó, nhưng điều này không đáng tin cậy và (ngay cả khi chính xác) có thể ảnh hưởng đáng kể đến hiệu suất của trang. Tính năng đo hiển thị và ẩn này có thể bị xóa trong phiên bản tương lai của jQuery

Ví dụ

Hiển thị các chiều rộng khác nhau. Lưu ý rằng các giá trị từ iframe nên có thể nhỏ hơn bạn mong đợi. Phần tô sáng màu vàng hiển thị nội dung khung nội tuyến

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

Thử nghiệm

.width( value )Trả về. jQuery

Sự miêu tả. Đặt chiều rộng CSS của từng phần tử trong tập hợp các phần tử phù hợp

đã thêm phiên bản. 1. 0 . chiều rộng(giá trị)
- giá trị
  Loại. Chuỗi hoặc Số
  Một số nguyên biểu thị số lượng pixel hoặc một số nguyên cùng với một đơn vị đo lường tùy chọn được thêm vào (dưới dạng một chuỗi)

đã thêm phiên bản. 1. 4. 1 . chiều rộng( chức năng )

chức năng

Loại. Hàm (Chỉ số số nguyên, Giá trị số nguyên) => Chuỗi hoặc Số

Một hàm trả về chiều rộng để đặt. Nhận vị trí chỉ mục của phần tử trong tập hợp và chiều rộng cũ làm đối số. Trong hàm,


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
script>
 
body>
html>

2 đề cập đến phần tử hiện tại trong tập hợp

Khi gọi


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
script>
 
body>
html>

3, giá trị có thể là chuỗi (số và đơn vị) hoặc số. Nếu chỉ một số được cung cấp cho giá trị, jQuery sẽ giả định một đơn vị pixel. Tuy nhiên, nếu một chuỗi được cung cấp, thì bất kỳ phép đo CSS hợp lệ nào cũng có thể được sử dụng cho chiều rộng (chẳng hạn như


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
script>
 
body>
html>

4,


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
script>
 
body>
html>

5 hoặc


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
script>
 
body>
html>

6). Lưu ý rằng trong các trình duyệt hiện đại, thuộc tính chiều rộng CSS không bao gồm phần đệm, đường viền hoặc lề, trừ khi thuộc tính CSS


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

9 được sử dụng

Nếu không có đơn vị rõ ràng nào được chỉ định (như "em" hoặc "%") thì "px" được giả định

Lưu ý rằng


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <style>
  div {
    width: 70px;
    height: 50px;
    float: left;
    margin: 5px;
    background: red;
    cursor: pointer;
  }
  .mod {
    background: blue;
    cursor: default;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
<div>ddiv>
 
<script>
var modWidth = 50;
$( "div" ).one( "click", function() {
  $( this ).width( modWidth ).addClass( "mod" );
  modWidth -= 8;
});
script>
 
body>
html>

3 đặt chiều rộng nội dung của hộp bất kể giá trị của thuộc tính CSS


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>width demotitle>
  <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="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
 
<button id="getp">Get Paragraph Widthbutton>
<button id="getd">Get Document Widthbutton>
<button id="getw">Get Window Widthbutton>
<div> div>
<p>
  Sample paragraph to test width
p>
 
<script>
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>
 
body>
html>

9

Làm cách nào để đặt chiều rộng của div theo nội dung?

Sử dụng thuộc tính khối nội tuyến. Sử dụng hiển thị. inline-block để đặt kích thước div theo nội dung của nó .

Chiều rộng tự động trong CSS là gì?

Khi một phần tử có auto làm giá trị cho chiều rộng, phần tử đó có thể có lề, phần đệm và đường viền mà không lớn hơn phần tử gốc . Chiều rộng của hộp nội dung của nó sẽ là chính nội dung với phép trừ lề, phần đệm và đường viền.

Chiều rộng được tính như thế nào trong CSS?

Thuộc tính chiều rộng trong CSS chỉ định chiều rộng của vùng nội dung của phần tử . Vùng “nội dung” này là phần bên trong phần đệm, đường viền và lề của một phần tử (mô hình hộp). Trong ví dụ trên, các phần tử có tên lớp là. bọc sẽ rộng bằng 80% so với phần tử cha của chúng.

Tôi có thể sử dụng tối đa không

nội dung phù hợp ở dạng chiều rộng tối thiểu hoặc tối đa . Đầu tiên có nghĩa là chiều rộng của hộp thay đổi giữa nội dung tối thiểu và tự động, trong khi thứ hai có nghĩa là nó thay đổi giữa 0 và nội dung tối đa. You can also use fit-content as a min-width or max-width value; see the example above. The first means that the width of the box varies between min-content and auto, while the second means it varies between 0 and max-content.

programming css

CSS đặt chiều rộng dựa trên phần tử khác

Ghi chú bổ sung

Ví dụ

Thử nghiệm

.width( value )Trả về. jQuery

đã thêm phiên bản. 1. 0 . chiều rộng(giá trị)

đã thêm phiên bản. 1. 4. 1 . chiều rộng( chức năng )

Làm cách nào để đặt chiều rộng của div theo nội dung?

Chiều rộng tự động trong CSS là gì?

Chiều rộng được tính như thế nào trong CSS?

Tôi có thể sử dụng tối đa không

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội