如何检查元素宽度是否大于 100%答案

【问题标题】：How to check if element width is greater than 100%如何检查元素宽度是否大于 100%
【发布时间】：2015-11-21 05:36:58
【问题描述】：

我想检查我的元素宽度是否大于 100% - 所以如果 div 是 113.42% 隐藏其他东西，但我无法让它隐藏元素。

现在，我有这个设置来测试，如果宽度大于 100%，则将背景设为黑色，否则将背景设为红色。现在，元素是红色的，但大于 100% 的元素不会变黑。有人可以指出我做错了什么吗？它还对我想用.display-area 在每个元素上检测的所有元素执行此操作-我是否必须使用.each 函数？

        var $displayarea = $(".display-area");
        var width = $('.display-area').width();
        var parentWidth = $('.display-area').offsetParent().width();
        var percent = 100*width/parentWidth;
//      var per = $('.first-div').width() * .80;
//      if ( $displayarea.width() > "100%" )  {
        if ($displayarea.css("width") > percent ) {
                $displayarea.css({ 
                        background: 'black'
                });

        } else {

                $displayarea.css({
                        background: 'red'
                });

        }

【问题讨论】：

你检查过你正在做的比较的值吗？ css("width") 将返回一个带有单位的字符串，即 IE。 "10px" 而 .width() 没有。可能是你在做 if("10px" > 10) 总是返回 false。
第二部分 - 是的，您需要使用.each，因为$displayarea 是所有.display-area div 的集合。因此，当您设置$displayarea.css ... 时，您将在每个.display-area 上设置该css 样式。
我该怎么写？ @samuelmr
@Bryan，如果您使用的是 Chrome，则内置了一个出色的 javascript 调试器。F12 键将打开它，您可以在源选项卡中找到您的 javascript，从这里您可以单击左侧有侧栏将放置一个断点。运行代码时，您可以将鼠标悬停在每个变量上以提供有关它的更多信息。
我要做的就是检查元素是否具有更大的 100% 宽度。这不能回答问题。你能帮我指出正确的方向吗？ @samuelmr

标签： javascript jquery html css

【解决方案1】：

我不知道这是否是您所追求的，但您可以查看演示 here。

$(function () {
    var $displayarea = $(".display-area");
    var parentWidth = $('.display-area').parent().width();

    $displayarea.each(function () {
        if ($(this).width() > parentWidth) {
            $(this).css({
                background: 'black'
            });

        } else {
            $(this).css({
                background: 'red'
            });
        }
    });

});

【讨论】：

老兄！这帮助了人！欣赏它！ @zgood，我无法理解它

【解决方案2】：

您可以使用各自的css 选择器比较html 标记和元素的宽度。

if($('div').css("width").replace("px","") > $('html').css("width").replace("px",""))
    alert($('div').css("width").replace("px","") - $('html').css("width").replace("px","")  + " more");

【讨论】：

【解决方案3】：

这可能是您正在搜索的内容：

var parent = $('.parentDiv').width();
var child = $('.childDiv').width();

var percent = child * 100 / parent;

if (percent > 100) {
   $('.childDiv').css('background-color', '#000')
} else {
   $('.childDiv').css('background-color', '#f00')
}

【讨论】：

你可以这样做：$('.parentDiv').width()不需要.replace('px', '');

【解决方案4】：

您需要检查调整大小事件

like $('.display-size').bind('resize',function(){
//logic
})

【讨论】：