JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<body>
    <div contextmenu="example">
        <h3>
            Menu示例
        </h3>
        <img src="https://cms-assets.tutsplus.com/uploads/users/69/posts/22269/image/contextual-menu-support.jpg" alt="支持情况" id="image"/>
    </div>
    <menu id="example" type="context">
        <menu label="example">
            <menuitem onclick="imageRotation('rotate-180')">
                Rotate 180
            </menuitem>
            <menuitem onclick="getSrc()">
                查看图片地址
            </menuitem>
        </menu>
    </menu>
    <script>
        function imageRotation(name) {
    document.getElementById('image').className = name;
}

function getSrc(){
    var imgsrc = document.getElementById('image').src;
    alert("图片地址："+imgsrc);
}
    </script>
</body>

CSS

.rotate-180 {
    transform: rotate(180deg);
}

JavaScript

function imageRotation(name) {
    document.getElementById('image').className = name;
}

function getSrc(){
    var imgsrc = document.getElementById('image').src;
    alert("图片地址："+imgsrc);
}