如何使用 onclick 事件切换反向操作

Question

我正在尝试将视频标签 object-fit 从 contain 更改为 fill，这工作正常，但我想执行相反的操作，当用户再次单击同一按钮时，它会将属性从 fill 更改为包含。

<a href="#" onclick="changeStyle()"><i class="fa fa-play-circle"></i></a>

<video controls poster="source-to-thumb.jpg" id="player" style="object-fit:contain;">
    <source src="source-to-file.mp4" type="video/mp4"/>
</video>

<script>
var video = document.getElementsByTagName('video')[0];
function changeStyle() {
  if(video.style.objectfit === 'fill') {
    video.style.objectFit = 'contain';
  } else {
    video.style.objectFit = 'fill'
  }
}
</script>

如有任何建议，我们将不胜感激。

Answer 1

使用 CSS classes 而不是使用内联样式（应尽可能避免）。然后你可以简单地切换 class.

的使用

另外，请参阅我的 HTML、CSS 和 JavaScript 关于更正您的其他代码的一些问题的评论。特别是 avoid methods that return "live" node list, like getElementsByTagName().

// Don't scan the whole document for all the matching
// elements when you know that there will only be one.
// Use getElementById() if there is an id.
var video = document.getElementById('player');

// Set up events in JavaScript, not HTML
document.querySelector("i.fa-play-circle").addEventListener("click", function(){
  // Just toggle the use of the other class:
  video.classList.toggle("fill");
});

/* Use CSS classes when possible */

i.fa-play-circle { cursor:pointer; }

/* This will be applied to the video by default */
video {
  object-fit:contain;
  border:1px solid black;
  height:150px;
  width:300px;
}

/* This class will be toggled on and off when the icon is clicked. 
   When it gets toggled on, the new object-fill value will override
   the previous one. When it gets toggled off, the previous style 
   will be restored. */
.fill {
  object-fit:fill;
}

<!-- Don't use hyperlinks just as a JavaScript hook.
     Hyperlinks are for navigation and using them for
     other purposes can cause problems for those using 
     screen readers.
     
     Any visible element supports a click event. Here,
     you can just set up the click event on the <i> element
     that people will be clicking on in the first place.
     
     Also, don't use inline HTML event attributes.
     Instead, separate your JavaScript into a script element.
-->
<i class="fa fa-play-circle">Hit play and then click Me several times</i><br>

<video controls poster="source-to-thumb.jpg" id="player">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"/>
</video>

如何使用 onclick 事件切换反向操作

How to toggle reverse action using onclick event

javascript

toggle