javascript - 使用 boolean 值切换

Question

我正在尝试设置元素的样式。我已经设置了一个 boolean 值并使用它在两个函数之间切换。但是，它不会运行，所以我不确定我的脚本是否正确。

var dfault = false

function rand() {
        return~~ (Math.random() * 255);
    }

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function randFrame(){
    vid = document.getElementById("video_container");

    if(!dfault){
        vid.style.backgroundColor  = get_random_color();


    }else{
        vid.style.border = ('5px solid rgba(54,57, 62, .3)');

    }

    dfault = !dfault
}

基本上，我想将边框从它的正常颜色更改为随机颜色，然后来回更改。

HTML:

<div id="sideMenu">
    <ul>
        <li onclick="wideScreen()">Wide Screen</li> <!--turn sidebar on/off-->
        <li onclick="randVidframe()">Random Border</li> <!--randomize vidcontain border-->
        <li>Control Bar</li>
    </ul>
</div>

CSS:

#video_container{
    -webkit-box-flex: 1; 
    -moz-box-flex: 1;
    border:5px solid rgba(54,57, 62, 1);
    margin: 20px;
    /*padding: 5px;*/
    height: 100%;
    position: relative;
    /*background-color:red;*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    z-index: 1;
}

Answer 1

你的脚本应该看起来更像这样

var dfault = false

function rand() {
        return~~ (Math.random() * 255);
    }
function randVidframe(){

    if(!dfault){
        elem.style.border = ('5px solid rgb(' + [rand(), rand(), rand()] + ')');

    }else{
        elem.style.border = ('5px solid rgba(54,57, 62, .3)');

    }

    dfault = !dfault
}