Question

我有一个随机挑选电影的阵列，下面我有电影海报，我只是点击海报，它带我到netflix上的电影，如果电影海报的周围颜色改为绿色，以便更容易找到。

JavaScript的

function GetValue()
{
    var myarray= new Array("13 assassins"); // just an example
    var random = myarray[Math.floor(Math.random() * myarray.length)];

    document.randform.randomfield.value = random;
}

        </script>

HTML

<body>
       <Div id=maincontent>
            <section id="topcontent">
       <form name="randform">
        <input type="button" id="btnSearch" value="Click for a random movie"    onclick="GetValue();" />
        <input type="text" name="randomfield" value="" size="50">
        </form>

            <section id="movies">

               <!--13 assassins -->
             <div id="movie">


                <a  href="link to film">
                    <img src="images/13.jpg" alt="player" width="225" height="325">
                </a>

            </div>

CSS

#movie{
   margin-top:5%;
    width:225px;
    height:325px;
    float:left;
    background-color:whitesmoke; //want this to be green when the movie is picked
    border-radius:5px; 
    margin-left:2%;
    padding:2% 3%;
    margin-bottom:2%;
    margin-right:2%; 
}

Answer 1

您可以使用jquery

更改css

$("#movie").css("background-color", "green");

如果你有一个电影的集合并获得div，你可以为每部电影设置div id。您可以将数据库ID用于电影。

$("#film356").css("background-color", "green");

Answer 2

function GetValue()
{
    var myarray= new Array("13 assassins"); // just an example
    var random = myarray[Math.floor(Math.random() * myarray.length)];

    document.randform.randomfield.value = random;
    document.getElementById(random).style.border = "2px solid green";// use this if you have multiple images .and to identify each image give the same id as the values in your array
   
   // but if you want to set border to div movie then do this:
 document.getElementById('movie').style.border = "2px solid green";// comment it if not required

}

#movie{
   margin-top:5%;
    width:225px;
    height:325px;
    float:left;
    background-color:whitesmoke; //want this to be green when the movie is picked
    border-radius:5px; 
    margin-left:2%;
    padding:2% 3%;
    margin-bottom:2%;
    margin-right:2%; 
}

<div id=maincontent>
            <section id="topcontent">
       <form name="randform">
        <input type="button" id="btnSearch" value="Click for a random movie"    onclick="GetValue();" />
        <input type="text" name="randomfield" value="" size="50">
        </form>

            <section id="movies">

               <!--13 assassins -->
             <div id="movie" >


                <a  href="link to film">
                    <img src="images/13.jpg" alt="player" width="225" height="325" id="13 assassins">
                </a>

            </div>
            </section>

如何根据数组的结果更改html部分的背景颜色

2 个答案: