简体   繁体   English

如何根据数组的结果更改html节的背景色

[英]how to change the background color of a html section depending on the result of an array

I have an array which picks a movie at random and below I have movie posters , I just click on the poster and it brings me to the movie on netflix, it would be great if the surrounding color of the movie poster changed to green so that it would be easier to find. 我有一个随机选择电影的数组,下面有电影海报,我只需单击海报即可将其带到netflix上的电影中,如果电影海报的周围颜色变为绿色,那么效果很好。会更容易找到。

javascript 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 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 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%; 
}

You can change css with jquery 您可以使用jQuery更改CSS

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

If you have a set and get div for film, you can set div id for every film. 如果有设置并获得电影的div,则可以为每部电影设置div id。 You can use database id for film. 您可以使用电影的数据库ID。

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

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM