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

查看＆＃34;整页＆＃34;
中的摘录

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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。

Answer 3

jQuery是一个选项：

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

如果父宽度超过特定值，则css应用样式

3 个答案: