如何检查元素宽度是否大于100％

Question

I want to check if my element is greater than 100% in width - so if the div is 113.42% hide something else, but I cannot get it to hide elements.

Right now, I have this set up to test, if the width is greater than 100% make background black else make background red. Right now, the elements are red but the elements that are greater than 100% are not turning black. Can someone pin point what I am doing wrong? It is also doing it to all elements I want to detect on each element with .display-area - do I have to use the .each function?

        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'
                });

        }

Answer 1

I don't know if this is what you are after, but you can check out a demo 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'
            });
        }
    });

});

Answer 2

You can compare the widths of the html tag and the element by using their respective css selectors.

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

Answer 3

Possible here is what you are searching:

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')
}

Answer 4

you need check on resize event

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