如果父宽度大于特定值，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>

Answer 1

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”中的sn-p

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>

Answer 2

jQuery 是一个选项：

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

Answer 3

如果我没听错的话......

JQuery:

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

CSS：

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

i 推荐你使用类，因为你可以在以后的类中添加更多的 css。