如何使用javascript更改flex元素的宽度？ 我有这个代码(小提琴 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( "宽度"， "300px" (;
如何在弹性框块中使用javascript更改宽度？
你可以这样定义
$(".bl1").css( "flex", "0 1 300px" );
当你为.bl1写作时，.bl2flex: 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;
弹性基础意味着盒子的宽度，您可以为旧版浏览器制作后卫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>您可以使用"flex"属性来更改其大小，而不是使用宽度。您也可以使用小数。