如何使用javascript更改flex元素的宽度?我有这个代码(fiddle https://jsfiddle.net/sdgz8nxa/24/)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
border: 2px solid red;
height: 100vh;
display: flex;
}
.bl1 {
border: 2px solid lime;
height 100%;
flex: 1;
}
.bl2 {
border: 2px solid blue;
height 100%;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="bl1"></div>
<div class="bl2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( '.bl1' ).append( 'before ' + $( ".bl1" ).css( "width" ) );
//here can't change
$( ".bl1" ).css( "width", "300px" );
$( '.bl1' ).append( '<br>after ' + $( ".bl1" ).css( "width" ) );
</script>
</div>
</body>
</html>
并且输出宽度始终相同此行不工作$( ".bl1“).css( " width ","300px”);
如何在flexbox块中使用javascript更改宽度?
发布于 2018-06-11 01:48:17
你可以这样定义
$(".bl1").css( "flex", "0 1 300px" );
当你为.bl1
和.bl2
flex: 1;
写文章时,这意味着
flex-grow: 1; // should be equal to each other
flex-shrink: 1;
flex-basis: 0%;
现在你可以说
$(".bl1").css( "flex", "0 1 300px" );
这意味着
flex-grow: 0;
flex-shrink: 1;
flex-basis: 300px;
和flex- make表示框的宽度,您可以使用width:300px
为较旧的浏览器提供全功能
$('.bl1' ).append( 'before ' + $(".bl1" ).css("width") );
//here can't change
$(".bl1").css( "flex", "0 1 300px" );
$('.bl1' ).append( '<br>after ' + $( ".bl1" ).css( "width" ) );
.container {
border: 2px solid red;
height: 100vh;
display: flex;
}
.bl1 {
border: 2px solid lime;
height 100%;
flex: 1;
}
.bl2 {
border: 2px solid blue;
height 100%;
flex: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="bl1"></div>
<div class="bl2"></div>
发布于 2018-06-11 01:40:41
你可以使用'flex‘属性来改变它的大小,而不是使用宽度。您也可以使用小数。
https://stackoverflow.com/questions/50786335
复制相似问题