Question

当div宽度大于80％时如何添加类？这就是我刚刚尝试过的

<div class="wrap_bar">
    <div class="bar" style="width:50%;"></div>
</div>
<div class="box"></div>


    <script>
                     var barTotal = $(".bar");
                     var box= $(".box");
                     var width = barTotal.width();
                     if (width > 80%)
                     box.addClass('type2')
    </script>

此代码无法正常运行。请帮助

Answer 1

如果仅一次（在加载DOM时）需要进行这种尺寸检测，则可以采用以下方法。

function addWhenResized(element){
    var parentWidth = $(element).parent().width();
    var elementWIdth = $(element).width();
    if( (elementWIdth / parentWidth)*100 > 79){
        $('.box').addClass('type2');
    } 
    else {
        $('.box').removeClass('type2');
    }
}

$(document).ready(function(){
    addWhenResized('.bar');
})

但是，如果要检测运行时维度更改，将会面临主要挑战。然后需要从这里寻求帮助：http://marcj.github.io/css-element-queries/

在从给定链接上方添加了插件之后，您应该遵循以下方法：

function addWhenResized(element){
    var parentWidth = $(element).parent().width();
    var elementWIdth = $(element).width();
    if( (elementWIdth / parentWidth)*100 > 79){
        $('.box').addClass('type2');
    } 
    else {
        $('.box').removeClass('type2');
    }
}

new ResizeSensor(jQuery('.bar'), function(){ 
    addWhenResized('.bar');
});

Answer 2

尝试一下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
     var barTotal = $(".bar");
     var barTotalWidth = barTotal.width();
     var box= $(".box");
     var boxWidth = box.width();
     var widthPercent = boxWidth / barTotalWidth;
     console.log(widthPercent);
     if (widthPercent > 0.8)
     box.addClass('type2');
  });
                     
</script>

<div class="bar" style="width:200px;height:100px;background-color:red"> </div>
<div class="box" style="width:190px;height:80px;background-color:blue"> </div>

Answer 3

您的代码不起作用，因为在页面加载时您只调用过一次javascript，因此必须将其包装为一个事件！看一看 that answer

或that answer

div宽度大于80％时添加类

3 个答案: