Главная » Языки программирования

Jquery this css height

На чтение 10 мин
Содержание
  1. jQuery height() Method
  2. Syntax
  3. Try it Yourself — Examples
  4. .height()
  5. Contents:
  6. .height() Returns: Number
  7. version added: 1.0 .height()
  8. Additional Notes:
  9. Example:
  10. Demo:
  11. .height( value ) Returns: jQuery
  12. version added: 1.0 .height( value )
  13. version added: 1.4.1 .height( function )
  14. Example:
  15. Understand and Master jQuery CSS Width and Height Functions
  16. Contents
  17. jQuery CSS Width and Height: Main Tips
  18. Functions to Use
  19. Inner/Outer: The Difference
  20. jQuery CSS Width and Height: Summary

jQuery height() Method

The height() method sets or returns the height of the selected elements.

When this method is used to return height, it returns the height of the FIRST matched element.

When this method is used to set height, it sets the height of ALL matched elements.

As the image below illustrates, this method does not include padding, border, or margin.

  • width() — Sets or returns the width of an element
  • innerWidth() — Returns the width of an element (includes padding)
  • innerHeight() — Returns the height of an element (includes padding)
  • outerWidth() — Returns the width of an element (includes padding and border)
  • outerHeight() — Returns the height of an element (includes padding and border)

Syntax

Set the height using a function:

  • index — Returns the index position of the element in the set
  • currentheight — Returns the current height of the selected element

Try it Yourself — Examples

Set the height of an element
How to set the height of an element using different units.

Increase the height using a function
How to use a function to increase the height of an element.

Return the height of the document and window elements
How to return the current height of the document and window elements.

Display dimensions with related methods
How to use width(), height(), innerHeight(), innerWidth(), outerWidth() and outerHeight().

Источник

.height()

Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

Contents:

.height() Returns: Number

Description: Get the current computed height for the first element in the set of matched elements.

version added: 1.0 .height()

The difference between .css( «height» ) and .height() is that the latter returns a unit-less pixel value (for example, 400 ) while the former returns a value with units intact (for example, 400px ). The .height() method is recommended when an element’s height needs to be used in a mathematical calculation.

This method is also able to find the height of the window and document.

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

Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box . To avoid this penalty, use .css( «height» ) rather than .height() .

Note: Although style and script tags will report a value for .width() or height() when absolutely positioned and given display:block , it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.

Читайте также:  Insert value in session php

Additional Notes:

  • The number returned by dimensions-related APIs, including .height() , may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
  • The value reported by .height() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .height() . jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

Example:

Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.

html>
html lang="en">
head>
 meta charset="utf-8">
 title>height demo title>
 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.7.0.js"> script>
 head>
body>
 
button id="getp">Get Paragraph Height button>
button id="getd">Get Document Height button>
button id="getw">Get Window Height button>
 
div>  div>
p>
 Sample paragraph to test height
 p>
 
script> 
function showHeight( element, height ) 
 $( "div" ).text( "The height for the " + element + " is " + height + "px." );
>
$( "#getp" ).on( "click", function( ) 
 showHeight( "paragraph", $( "p" ).height() );
>);
$( "#getd" ).on( "click", function( ) 
 showHeight( "document", $( document ).height() );
>);
$( "#getw" ).on( "click", function( ) 
 showHeight( "window", $( window ).height() );
>);
 script>
 
 body>
 html>

Demo:

.height( value ) Returns: jQuery

Description: Set the CSS height of every matched element.

version added: 1.0 .height( value )

An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).

version added: 1.4.1 .height( function )

A function returning the height to set. Receives the index position of the element in the set and the old height as arguments. Within the function, this refers to the current element in the set.

When calling .height(value) , the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, a valid CSS measurement must be provided for the height (such as 100px , 50% , or auto ). Note that in modern browsers, the CSS height property does not include padding, border, or margin.

If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.

Note that .height(value) sets the content height of the box regardless of the value of the CSS box-sizing property.

Example:

To set the height of each div on click to 30px plus a color change.

Источник

Understand and Master jQuery CSS Width and Height Functions

Understanding and correctly using sizing parameters is crucial. Not only it is an essential part of any design, but it may also affect functionality. For example, if we make a text box too small, the content might not fit in.

By using jQuery CSS width and height functions, you can quickly get or set the parameters on the DOM elements, both with and without styling properties. In this tutorial, we cover the syntax needed to make jQuery get CSS width and height values and set them as well.

Contents

jQuery CSS Width and Height: Main Tips

  • jQuery has six methods used to return the height and width values of the elements inside the DOM.
  • You can use two of them as jQuery CSS set height and width functions as well, but you should pay attention to different syntax rules.
  • You can also choose whether these values will include padding, border, and margin.

Functions to Use

The jQuery library includes several functions for manipulating the height and width of elements. They include:

  • .width() - set or return the jQuery CSS width of an element (excluding padding, border and margin).
  • .height() - set or return the jQuery CSS height of an element (excluding padding, border and margin).
  • .innerWidth() - return the jQuery CSS width of an element (including padding).
  • .innerHeight() - return the jQuery CSS height of an element (including padding).
  • .outerWidth() - return the jQuery CSS width of an element (including padding and border).
  • .outerHeight() - return the jQuery CSS height of an element (including padding and border).

Look at the example below to see how to make jQuery get element width and height values:

$("button").click(() => < alert("Width of div:" + $("div").width()); alert("Height of div:" + $("div").height()); >);

Here we have an example of setting the dimensions via these two methods as well:

$("button").click(() => < $("div").height(200); $("div").width("50%"); >);

The .width() and .height() methods use different syntax for setting and returning values of width and height properties.

Returning: $(selector).width | height()

Setting: $(selector).width | height(value)

The value in this example represents a number, which is converted to be the number of pixels the width or height should be set to. If the value is a string, an adequate unit of length must be provided as well:

  • 100 would be valid, resulting in the element being set to 100 pixels width or height.
  • "100" would not be a valid input because a unit of measurement is expected at the end of this value. To fix this, we must change it to "100px" .

If the value is a string, other CSS values are viable as well. For example, you can enter values in percentages, or the auto keyword. For more information, see the CSS Units tutorial.

  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion

Inner/Outer: The Difference

The .innerHeight() , .innerWidth() , .outerHeight() and .outerWidth() methods are all used for getting the values of all properties contributing to the dimensions of the element together.

All of them follow this simple syntax pattern:

$(selector).innerHeight | innerWidth | outerHeight | outerWidth()

Inner dimensions normally include the width or height of the padding and the base element itself together. Here we have an example of getting and displaying the inner dimensions of an element:

$("button").click(() => < var txt = ""; txt += "Inner width of div: " + $("#div1").innerWidth() + "
"; txt += "Inner height of div: " + $("#div1").innerHeight() + "
"; $("#div1").html(txt); >);

Outer dimensions normally include the width or height of the padding, the border and the base element itself together. Here we have an example of getting and displaying the outer dimensions of an element:

$("button").click(() => < var txt = ""; txt += "Outer width of div: " + $("#div1").outerWidth() + "
"; txt += "Outer height of div: " + $("#div1").outerHeight() + "
"; $("#div1").html(txt); >);

.outerWidth() and .outerHeight() methods include the includeMargin parameter, which is a boolean that defaults to false. By changing it to true, you make the outer dimensions include the margin as well.

Here we have an example of getting and displaying the outer dimensions (including the margin) of an element:

$("button").click(() => < var txt = ""; txt += "Outer width of div: " + $("#div1").outerWidth(true) + ""; txt += "Outer height of div: " + $("#div1").outerHeight(true) + ""; $("#div1").html(txt); >);

In the following example, you can see jQuery get element width and height of the document (the HTML document) and window (the browser viewport):

$("button").click(() => < var txt = ""; txt += "Width x height of document: " + $(document).width(); txt += "x" + $(document).height() + "
"; txt += "Width x height of window: " + $(window).width(); txt += "x" + $(window).height(); $("#div1").html(txt); >);

jQuery CSS Width and Height: Summary

  • The height and width of DOM elements can be returned by using respective jQuery functions.
  • Before you get width of element in jQuery, you can choose whether to include the padding, margins or borders.
  • You can also make jQuery CSS set height or weight.

Источник

Оцените статью
© 2023 Программирование