如果父宽度大于特定值，则css应用样式

css apply style if parent width more than specific value

本文关键字：css 应用 样式 大于 如果      更新时间：2023-09-26

如果仅父元素宽度大于特定值，则希望应用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>

Resize事件仅适用于窗口元素。

Vanilla 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>

jQuery是一个选项： 
 $( document ).ready(function() {
if ($(".parent").width() > 700) {
$('.parent').css("background-color", "red");
}
});

如果我说对了。。。

JQuery:

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

CSS：

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

i建议您使用class，因为以后可以向该类添加更多css。

相关文章：