javascript - 在按钮上单击可更改div宽度，在按钮上单击可恢复原样？

<div class="video-embeds" style="margin-top: 0px;
margin-top: 0px;
    width: 950px;
    float: left;
    display: inline-block;
">
<div class="video-embed" style="margin-top: 0px;">
<?php

$url1 = get_post_meta( $post->ID , 'video_play' , true );
$search     = '#(.*?)(?:href="https?://)?(?:www\.)?(?:youtu\.be/|youtube\.com(?:/embed/|/v/|/watch?.*?v=))([\w\-]{10,12}).*#x';
$replace    = 'http://www.youtube.com/embed/$2';
$url        = preg_replace($search,$replace,$url1);

?>

<iframe width="560" height="315" src="<?php echo $url; ?>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>
</div>

这一项应该更改：

<div class="video-embeds" style="margin-top: 0px;
margin-top: 0px;
    width: 950px;
    float: left;
    display: inline-block;
">

至：

<div class="video-embeds" style="margin-top: 0px;
margin-top: 0px;
    width: 100%;
    float: left;
    display: inline-block;
">

如您所见，其将div更改为全宽父div或100％，或变为950px（取决于媒体屏幕尺寸及其变量），并且应该通过按钮。

最简单的解决方案是什么？

<script type="text/javascript">
   function changec() {
       var xDiv = document.getElementsByClassName('video-embeds');

       if (xDiv.style.width == '')
           xDiv.style.width = '950px'
       else
           xDiv.style.width = '100%'
}
</script>

<div id="menu" onclick="changec()">&#8801;</div>

尝试过此脚本，但是变量xDiv.style.width = '950px'不能为常数，因为响应的CSS导致CSS发生变化，并且onclick不会返回它。

最佳答案

为此，您可以使用Javascript，然后通过元素的ID调用Function，
要更改设置，请在函数内部使用if子句：

var element = document.getElementById('divid');

if (element.style.width == '900px') element.style.width= '100%' else element.style.width = '900px' }

关于javascript - 在按钮上单击可更改div宽度，在按钮上单击可恢复原样？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49710638/