Question

JavaScript中的offsetHeight的jQuery等价物是什么？

我想翻译以下代码以使用JQuery

document.querySelector('.site-header').offsetHeight;

Answer 1

offsetHeight property包括高度计算中的垂直填充和边框，因此.outerHeight() method将是jQuery等价物。

Example Here

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
/* Given structure format that is needed to be used in the program. */
struct Shift
{
char name[100];
char day_of_week[100];
int start_hour;
int end_hour;
};

/* Functions that will be used in the program. */
int read_data(struct Shift shift_data[], int *num_shifts);
void sort_data(struct Shift shift_data[], int *num_shifts);
void print_data(struct Shift shift[], int num_shifts);

int main(void)
{
struct Shift shift_data[100];
struct Shift temp;

/*Declare and initialize variables, and statements to call each function. */
int num_shifts;

read_data(shift_data, &num_shifts);

sort_data(shift_data, &num_shifts);

print_data(shift_data, num_shifts);

return 0;
}

/*** Preconditions: array of structure "Shift" to store data
 Postconditions: number of shifts read in from data file
 Actions: Ask user for name of input file. Read the number of shifts, then read in the data for all
          of the shifts. Return the number of shifts. ***/
int read_data(struct Shift shift_data[], int *num_shifts)
{
/*Declare and initialize variables. */
char input_schedule[100];
int i;
char shift_name[100], shift_day[100];
/*Prompt user to enter the input file. */
printf("Enter the name of the file name.\n");
scanf("%s", &input_schedule[100]);
/*Declare file and read in the needed values. */
FILE *ifp;
ifp = fopen("input_schedule.txt", "r");
fscanf(ifp, "%d", &num_shifts);
/*For loop to read in each value from the file and store them in the shift_data array. */
for(i=0; i<(*num_shifts); i++)
{
     fscanf(ifp, "%s %s %d %d\n", &shift_data[i].name, &shift_data[i].day_of_week, &shift_data[i].start_hour, &shift_data[i].end_hour);
}
/*Close file.*/
fclose(ifp);

return num_shifts;
}
/*** Preconditions: array of structure "Shift" integer value indicating number of shifts
 Postconditions: none - this function does not return anything.
 Actions: Sort the shifts by the TA's first name. ***/
void sort_data(struct Shift shift_data[], int *num_shifts)
{
/*Declare and initialize variables. */
int i,j;
/*For loop to run through each array.*/
for(i=0; i<(*num_shifts); i++)
{
/*For loop to use the next element in the array to compare to the element before it.*/
    for(j=i+1; j<(*num_shifts); j++)
    {
/*If statements using strcmp to compare the two strings and sort the data in order.*/
        if(strcmp(shift_data[i].name,shift_data[i].name) < 0)
        {
            memcpy(temp.name, shift_data[i].name, strlen(shift_data[i].name) + 1);
            memcpy(shift_data[i].name, shift_data[j].name, strlen(shift_data[j].name) + 1);
            memcpy(shift_data[j].name, temp.name, strlen(temp.name) + 1);
        }
        if(strcmp(shift_data[i].day_of_week,shift_data[i].day_of_week) < 0)
        {
            temp.day_of_week = shift_data[i].day_of_week;
            shift_data[i].day_of_week = shift_data[j].day_of_week;
            shift_data[j].day_of_week = temp.day_of_week;
        }
        if(strcmp(shift_data[i].start_hour,shift_data[i].start_hour) < 0)
        {
            temp.start_hour = shift_data[i].start_hour;
            shift_data[i].start_hour = shift_data[j].start_hour;
            shift_data[j].start_hour = temp.start_hour;
        }
        if(strcmp(shift_data[i].end_hour,shift_data[i].end_hour) < 0)
        {
            temp.end_hour = shift_data[i].end_hour;
            shift_data[i].end_hour = shift_data[j].end_hour;
            shift_data[j].end_hour = temp.end_hour;
        }
    }

}
}

/*** Preconditions: array of structure "Shift" integer value indicating number of shifts
 Postconditions: none - this function does not return anything.
 Actions: Print the sorted data in the format described below. **/
void print_data(struct Shift shift_data[], int num_shifts)
{
/*Declare and initialize variables.*/
int i;

printf("\n\n\n");
/*For loop to print out the sorted data to the user.*/
for(i=0; i<num_shifts; i++)
{
    printf("%s\t\t", shift_data[i].name);
    printf("%s\t", shift_data[i].day_of_week);
    printf("%d to ", shift_data[i].start_hour);
    printf("%d\n", shift_data[i].end_hour);
/*If statements to change the shift times from military time to standard time.*/
    if(shift_data[i].start_hour > 12)
    {
        shift_data[i].start_hour = shift_data[i].start_hour - 12;
        printf("%2d:00 pm to  ", shift_data[i].start_hour);
    }
    else if(shift_data[i].start_hour < 12)
    {
        printf("%2d:00 am to  ", shift_data[i].start_hour);
    }
    else if(shift_data[i].start_hour == 12)
    {
        printf("%2d:00 pm to  ", shift_data[i].start_hour);
    }

    if(shift_data[i].end_hour > 12)
    {
        shift_data[i].end_hour = shift_data[i].end_hour - 12;
        printf("%2d:00 pm\n", shift_data[i].end_hour);
    }
    else if(shift_data[i].end_hour < 12)
    {
        printf("%2d:00 am\n", shift_data[i].end_hour);
    }
    else if(shift_data[i].end_hour == 12)
    {
        printf("%2d:00 pm\n", shift_data[i].end_hour);
    }
}
}

作为旁注，.outerHeight() method采用可选参数在高度计算中包含垂直边距：

$('.site-header').outerHeight();

Answer 2

jQuery 的 .outerHeight() 方法类似，但并不完全相同，因为它并不总是像 HTMLElement.offsetHeight 那样返回整数。

翻译上述示例的最准确方法实际上是交换元素的选择，而只保留 offsetHeight：

$('.site-header')[0].offsetHeight;

或者，保持纯 jQuery 并保持整数结果：

Math.round($('.site-header').outerHeight());

事实证明，当将输出与其他属性（如 HTMLElement.scrollHeight 也将始终返回一个整数）进行比较时，这一点很重要。

为什么重要：我自己在进行代码审查时遇到了这个问题。我认为它们是等价的，但不明白为什么这在我的机器上不起作用，但它在其他开发者的机器上运行：

// My machine: 149.714 < 150 = true
// Other machine: 150 < 150 = false
let lessTall = $container.outerHeight() < $container.prop('scrollHeight')

我相信这是由于设备像素比率不同（他使用的是 Macbook，而我使用的是带有 4k 显示器的 Windows 10）。这里的一般解决方案是确保我们在进行比较时在双方均匀地执行相同类型的计算；即两边都舍入数字，而不仅仅是一侧，或者在我们的例子中，为了内部一致性，只在两边使用相同的 API。例如，我的解决方案是：

// My machine: 150 < 150 = false
// Other machine: 150 < 150 = false
let lessTall = container.offsetHeight < container.scrollHeight;

什么是jQuery相当于offsetHeight？

2 个答案: