javascript 我怎样用JS中的一个按钮控制CSS

bakd9h0s 于 2023-01-24 发布在 Java

关注(0)|答案(3)|浏览(103)

我找不到正确的JS代码来控制CSS。打开链接后，我需要关闭“转换”，然后打开并来回切换按钮“转换”。它开始作为一个开/关静音按钮，不需要CSS，所以我的路径？
按钮（播放/暂停/等）是在一个div。他们的功能是在JS和所有的工作，除了，我需要这一个达到CSS，但找不到我的大脑。删除的CSS和它打开和运行其他一切和运行的方式，我想。谢谢。

<button onclick="transform()">mirror</button> 

    #myplayer {
  
      transform: rotateY(180deg);
    }
  
 var player = document.getElementById("myplayer");

    function transform() { 
        if (player.transform)
            player.transform = false
        else
            player.transform = true
    }

JavaScript

来源：https://stackoverflow.com/questions/75202251/how-can-i-control-css-with-a-button-in-js

3条答案

按热度按时间

11dmarpk1#

获取button元素，向其添加click事件处理程序，在处理程序中单击按钮后，获取video元素，然后使用.classList.toggle('class-name')切换类。

document.getElementById("transformPlayer").addEventListener("click", function() {
  document.getElementById("player").classList.toggle('transform180')
});

.transform180 {
  transform: rotateY(180deg);
}

<button id="transformPlayer">mirror</button>

<video id="player" controls width="250">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
            type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
            type="video/mp4">
</video>

赞(0）回复(0）举报 2023-01-24

u0sqgete2#

使用类

const player = document.querySelector('#myplayer')
const button = document.querySelector('button')

button.addEventListener('click', () => {
  player.classList.toggle('rotate')
})

#myplayer {
  background: red;
  height: 100px;
  width: 100px;
  color: white;
}

#myplayer.rotate {
  transform: rotateY(180deg);
}

<button>mirror</button>
<div id="myplayer">:)</div>

赞(0）回复(0）举报 2023-01-24

9fkzdhlc3#

更改此

function transform() { 
            if (player.transform)
                player.transform = false
            else
                player.transform = true
        }

到这个

function transform() { 
        if (player.style.transform){
            player.style.transform = "";
        }
        else{
            player.style.transform="rotate(180deg)";
        }
    }

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 我怎样用JS中的一个按钮控制CSS

3条答案

相关问题

热门标签

最新问答