如果元素宽度有效，则使用 jQuery 函数

Question

我是 jQuery 的新手，我发现可以在我的站点中使用此代码：

$(function() {
  elemWidth = parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10);
  halfWidth = parseInt(window.innerWidth / 2, 10);
  alert("Your browser " + ((elemWidth == halfWidth) ? "" : "does not ") + "support VW and VH");
});

代码检查我的元素是否具有我在 css 中定义的大小，如果用户浏览器支持我的大小单位（视口），则返回。

如果 elemWidth 值与 halfWidth 不同，我需要加载脚本，但我不知道如何加载将此警报更改为调节功能。

谢谢！

Answer 1

表达式 ((elemWidth == halfWidth) ? "" : "does not " 使用了 conditional ternary operator.

它是以下简称：

if (elemWidth == halfWidth) {
  // ""
} else {
  // "does not"
}

因此，如果您想要在 elemWidth 值与 halfWidth 不同的情况下加载脚本，那么您可以简单地使用 $.getScript function 或任何您正在使用的加载脚本。

if (elemWidth !== halfWidth) {
  $.getScript('...');
}

Answer 2

非常简单，将两个值的比较放在一个条件中，如果它们不相等，则编写脚本。

$(function () {
    var elemWidth = parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10);
    var halfWidth = parseInt(window.innerWidth / 2, 10);

    if ( elemWidth !== halfWidth ) {

        $.getScript('whatever.js');

    }
});

Answer 3

var elemWidth =    parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10);
var halfWidth = parseInt(window.innerWidth / 2, 10);
elementWidth !== halfWidth ? alert("Your browser " + ((elemWidth == halfWidth) ? "" : "does not ") + "support VW and VH");

如果元素宽度有效，则使用 jQuery 函数

Using jQuery function if element width is valid

javascript

jquery

viewport