如果父元素的宽度大于特定值，应用CSS样式

Question

如果只有父元素的宽度大于特定值，希望应用CSS选择器。 CSS不能使用媒体查询来实现这一点，因为视口宽度和父div宽度之间没有关系。 欢迎使用JavaScript，但请避免连续的宽度检查。 例如：

<style>

/*  something like that  div[width>400px]  */
   .parent div[width>400px]{
       background:red;
    }


</style>


<!--ok width is more than 400 so apply style to child div-->
<div class="parent" style="width:500px;"> 
    <div>

    </div>
</div>


<!--width is still less than 400 so don;t apply styles-->
<div class="parent" style="width:300px;"> 
    <div>

    </div>
</div>

- Sameh Dev

Answer 1

调整大小事件仅适用于窗口元素。

原生JavaScript代码如下。

var parentDivTriggrtWidth = 400;
var childDivClassNames = ["red", "blue"];

window.addEventListener("load", function(e){
    var list = document.getElementsByClassName("parent");
    for(var i=0; i<list.length; i++){
        var parentDiv = list[i];
        parentDiv.resizeParent = function(width){
            if(typeof width!="undefined"){ this.style.width = width+"px"; }
            var k = this.clientWidth > parentDivTriggrtWidth ? 1 : 0;
            this.children[0].className = childDivClassNames[k];
// Debug only
this.children[0].innerHTML = "Parent Size: "+this.clientWidth+"<br />Class: "+this.children[0].className;
        }
        window.addEventListener("resize", function(e){ parentDiv.resizeParent(); },false);
        parentDiv.resizeParent();
    }
},false);

请查看“fullpage”中的代码片段。

var parentDivTriggrtWidth = 400;
var childDivClassNames = ["red", "blue"];

window.addEventListener("load", function(e){
 var list = document.getElementsByClassName("parent");
 for(var i=0; i<list.length; i++){
  var parentDiv = list[i];
  parentDiv.resizeParent = function(width){
   if(typeof width!="undefined"){ this.style.width = width+"px"; }
   var k = this.clientWidth > parentDivTriggrtWidth ? 1 : 0;
   this.children[0].className = childDivClassNames[k];
// Debug only
this.children[0].innerHTML = "Parent Size: "+this.clientWidth+"<br />Class: "+this.children[0].className;
  }
  window.addEventListener("resize", function(e){ parentDiv.resizeParent(); },false);
  parentDiv.resizeParent();
 }
},false);

.parent {
  border: 3px solid #aaaaaa;
}
.parent div {
  width: 200px;
  height: 200px;
  color: white
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<h3>width 500px (resize by JavaScript)</h3>

<div id="p1" class="parent" style="width:500px;">
  <div></div>
</div>

<button type="button" onclick="document.getElementById('p1').resizeParent(800)">Resize +</button>
<button type="button" onclick="document.getElementById('p1').resizeParent(200)">Resize -</button>
<button type="button" onclick="document.getElementById('p1').resizeParent(500)">Reset</button>

<hr />

<h3>width 100% (resize window)</h3>

<!--width is still less than 400 so don;t apply styles-->
<div id="p2" class="parent" style="width:100%;">
  <div></div>
</div>

- Federico

Answer 2

如果我理解正确的话...

JQuery:

$(document).ready(function(){
    var ParentWidth = $('.parent').width();
    if (ParentWidth > 400) {
        $('.parent').addClass('newstyle');
    }
});

CSS：

.newstyle
{
    background: red;
    /*** add more css ***/
}

我建议您使用类（class），因为稍后您可以向类添加更多的CSS。

- Eran.E

---

好的，没错，但是如果改变父元素的大小呢？ 如果我通过JavaScript将父元素的宽度更改为小于400像素，则样式将保持不变。 - Sameh Dev

问题是什么时候...如果您的意思是在调整大小时更改父级，以便可以使用调整大小的 jQuery 函数来检查宽度并根据结果添加或删除类，则如何处理？ - Eran.E

父级div的宽度只能通过以下方式更改：

1. innerHTML更改
2. 其他CSS类
3. JavaScript。 因此，它与onresize事件无关。

- Sameh Dev

所有可能的更改都在加载时进行吗？（而不是事件） - Eran.E

Answer 3

jQuery是一个选择：

 $( document ).ready(function() {
if ($(".parent").width() > 700) {
$('.parent').css("background-color", "red");
}
});

- Nik Drosakis