Question

当鼠标悬停在边框上时，我试图让边框随机改变颜色，如果顶部或底部边框发生变化，我会尝试更改边框。如果我运行obj.style.borderTop = "3px Solid #dddddd"它就可以了。然而，当我尝试连接相同的同一行但添加随机生成的颜色和边框时，它不起作用。这是JS

<script type="text/javascript">
    "use strict";
    var tb = ["borderBottom", "borderTop"];
    var colour = ["#16a085", "#8e44ad", "#ee006b", "#27ae60", "#c0392b", "#e67e22", "#2980b9"]; 

    function randColours(obj) {
        var randTB = tb[Math.floor(Math.random() * tb.length)];
        var randColour = colour[Math.floor(Math.random() * colour.length)];
        var final = "obj.style.";
        var final = final.concat(randTB);
        var final = final.concat("= '3px Solid ");
        var final = final.concat(randColour);
        var final = final.concat("';");
        var execuatable = new Function(final);
        return(execuatable());
    }
    function rcrm(x){
        x.style.border = "3px solid #2c3e50";
    }
</script>

这是鼠标悬停应用于<li onmouseover="randColours(this)" onmouseout="rcrm(this)"><a href="">PHOTOS</a></li>

的HTML

我知道连接非常有效，但它有助于分解代码。我也尝试用obj.替换document.getElementById('photo')然后它可以工作，但它需要能够处理我抛出的所有东西。真的不知道如何解决这个问题。干杯

Answer 1

您可以构建一个字符串并将其分配给对象的样式，而不是创建一个字符串来作为JS执行。这里的想法是使用括号表示法来获得对象样式的borderBottom或borderTop。

这是一个固定的现场演示：

var tb = ["borderBottom", "borderTop"];
var colour = ["#16a085", "#8e44ad", "#ee006b", "#27ae60", "#c0392b", "#e67e22", "#2980b9"];

function randColours(obj) {
    var randTB = tb[Math.floor(Math.random() * tb.length)];
    var randColour = colour[Math.floor(Math.random() * colour.length)];
    obj.style[randTB] = "3px solid " + randColour;
}

function rcrm(x) {
    x.style.border = "3px solid #2c3e50";
}

<li onmouseover="randColours(this)" onmouseout="rcrm(this)"><a href="">PHOTOS</a>
</li>

JSFiddle版本：https://jsfiddle.net/1nbyh6gh/

与this.style.borderTop JS的问题

1 个答案: