以下颜色更改功能在IE9和FF中正常工作，但在早期的IE或CHROME中没有

时间：2012-08-28 21:06:09

标签： javascript css javascript-events

//以下函数更改了CSS渲染图像中的JavaScript代码颜色，它只能在IE9中运行，FF是否存在这方面的问题，或者是否可以在http://www.cornholeny.com/c_y_b_arrowhead.php看到代码页中的某些内容。 // 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

       <title>ARROWHEAD DESIGN</title>

        <link href="css/structure.css" rel="stylesheet" type="text/css" />
        <link href="css/design.css" rel="stylesheet" type="text/css" />


            <!--[if lte IE 7]>
        <link href="" rel="stylesheet" type="text/css" />
            <![endif]-->

        <?php
         include('includes/meta.php');
         ?>

        <style type="text/css">

            div#menu {
          width: 880px;
        height: 65px;
          float: top;
              margin:0px
            }

        div#main {
         margin-left: 0%;
         margin-right: 0%;
         margin-top: 1px;
         padding: 10px;
             }

        div#footer {
         padding: 15px;
         margin: 0px;
         border-bottom: thin solid #000000;
               }
        </style>

//these are the functions that are activated by select options//

    <script type="text/javascript">

function colorchange1()
{

document.getElementById("box-a").style.backgroundColor="grey";

document.getElementById("box-a2").style.backgroundColor="grey";
}


function colorchange2()
{

document.getElementById("box-a").style.backgroundColor="orange";

document.getElementById("box-a2").style.backgroundColor="orange";


}


function colorchange3()
{

document.getElementById("box-a").style.backgroundColor="yellow";

document.getElementById("box-a2").style.backgroundColor="yellow";
}


function colorchange4()
{

document.getElementById("box-a").style.backgroundColor="#6DE91B";

document.getElementById("box-a2").style.backgroundColor="#6DE91B";
}


function colorchange5()
{

document.getElementById("box-a").style.backgroundColor="blue";

document.getElementById("box-a2").style.backgroundColor="blue";
}


function colorchange6()
{

document.getElementById("box-a").style.backgroundColor="brown";

document.getElementById("box-a2").style.backgroundColor="brown";
}


function colorchange7()
{

document.getElementById("box-a").style.backgroundColor="red";

document.getElementById("box-a2").style.backgroundColor="red";
}


function colorchange8()
{

document.getElementById("box-a").style.backgroundColor="white";

document.getElementById("box-a2").style.backgroundColor="white";
}


function colorchange9()
{

document.getElementById("box-a").style.backgroundColor="black";

document.getElementById("box-a2").style.backgroundColor="black";
}


function colorchange10()
{

document.getElementById("box-a").style.backgroundColor="pink";

document.getElementById("box-a2").style.backgroundColor="pink";
}


function changearrow1()
{

document.getElementById("arrow").style.borderBottomColor="grey";

document.getElementById("arrow2").style.backgroundColor="grey";

document.getElementById("arrow-a").style.borderBottomColor="grey";

document.getElementById("arrow-a2").style.backgroundColor="grey";


}


function changearrow2()
{

document.getElementById("arrow").style.borderBottomColor="orange";

document.getElementById("arrow2").style.backgroundColor="orange";

document.getElementById("arrow-a").style.borderBottomColor="orange";

document.getElementById("arrow-a2").style.backgroundColor="orange";


}


function changearrow3()
{

document.getElementById("arrow").style.borderBottomColor="yellow";

document.getElementById("arrow2").style.backgroundColor="yellow";

document.getElementById("arrow-a").style.borderBottomColor="yellow";

document.getElementById("arrow-a2").style.backgroundColor="yellow";


}


function changearrow4()
{

document.getElementById("arrow").style.borderBottomColor="#6DE91B";

document.getElementById("arrow2").style.backgroundColor="#6DE91B";
document.getElementById("arrow-a").style.borderBottomColor="#6DE91B";

document.getElementById("arrow-a2").style.backgroundColor="#6DE91B";

}


function changearrow5()
{

document.getElementById("arrow").style.borderBottomColor="blue";

document.getElementById("arrow2").style.backgroundColor="blue";

document.getElementById("arrow-a").style.borderBottomColor="blue";

document.getElementById("arrow-a2").style.backgroundColor="blue";


}


function changearrow6()
{

document.getElementById("arrow").style.borderBottomColor="brown";

document.getElementById("arrow2").style.backgroundColor="brown";

document.getElementById("arrow-a").style.borderBottomColor="brown";

document.getElementById("arrow-a2").style.backgroundColor="brown";

}


function changearrow7()
{

document.getElementById("arrow").style.borderBottomColor="red";

document.getElementById("arrow2").style.backgroundColor="red";
document.getElementById("arrow-a").style.borderBottomColor="red";

document.getElementById("arrow-a2").style.backgroundColor="red";

}


function changearrow8()
{

document.getElementById("arrow").style.borderBottomColor="white";

document.getElementById("arrow2").style.backgroundColor="white";
document.getElementById("arrow-a").style.borderBottomColor="white";

document.getElementById("arrow-a2").style.backgroundColor="white";

}


function changearrow9()
{

document.getElementById("arrow").style.borderBottomColor="black";

document.getElementById("arrow2").style.backgroundColor="black";

document.getElementById("arrow-a").style.borderBottomColor="black";

document.getElementById("arrow-a2").style.backgroundColor="black";

}

function changearrow10()
{

document.getElementById("arrow").style.borderBottomColor="pink";

document.getElementById("arrow2").style.backgroundColor="pink";

document.getElementById("arrow-a").style.borderBottomColor="pink";

document.getElementById("arrow-a2").style.backgroundColor="pink";

}
        </script>



        <?php
         include('includes/header-menu.php');
         ?>


    </head>

    <body>

 //these are the css images//

        <style type="text/css">


#container { 
    width: 785px; 
    height: 450px;
    background-color: #D9F3CF;
    margin-left: auto;
    margin-right: auto;
    padding: 15px; 
    position: relative;

}

#boardleft { 
    width: 151px; 
    height: 301px; 
    position: relative;
    float:left; 
}


#boardright { 
    width: 151px; 
    height: 301px; 
    position: relative;
    float:right; 
}


#circle{
    border:none;
    background-color: #D9F3CF;
    width:45px;
    height:45px;
    border-radius:50%;
    top:30px;
    left:52.5px;
    position: absolute;
}

#box-a {

    width: 150px;
    height:300px;

    background-color: white;

        border: none;

    position: absolute;
}

#box-a2 {

    width: 150px;
    height:300px;

    background-color: white;

        border: none;

    position: relative
}

#arrow2 {
        width: 30px;
    height:150px;


    background-color: white;

    border: none;
    bottom: 0px; 
    left: 60px;
    position: absolute;
}

#arrow {
     width: 0; 
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 75px solid white;
    bottom: 150px; 
    left: 40px;
    position: absolute;
}

#arrow-a2 {
        width: 30px;
    height:150px;


    background-color: white;

    border: none;
    bottom: 0px; 
    left: 60px;
    position: absolute;
}

#arrow-a {
     width: 0; 
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 75px solid white;
    bottom: 150px; 
    left: 40px;
    position: absolute;
}

    p.numbers_black {
        color: black;
        text-align: center;
        font-size: 20pt;
        }

    p.numbers_white {
        color: white;
        text-align: center;
        font-size: 20pt;

    }

#colorchart { 
    width: 325px; 
    height: 130px;
    background-color: #D9F3CF;
    position: absolute;
    bottom: 8px;
    left: 245px;
}

#box-grey {

        width: 65px;
    height:65px;

    background-color: grey;

        border: none;

    position: relative;
    float: left;
}

#box-orange {

        width: 65px;
    height:65px;

    background-color: orange;

        border: none;

    position: relative;
    float: left;
}

#box-yellow {

        width: 65px;
    height:65px;

    background-color: yellow;

        border: none;

    position: relative;
    float: left;
}

#box-green {

        width: 65px;
    height:65px;

    background-color: #6DE91B;

        border: none;

    position: relative;
    float: left;
}

#box-blue {

        width: 65px;
    height:65px;

    background-color: blue;

        border: none;

    position: relative;
    float: left;
}

#box-brown {

        width: 65px;
    height:65px;

    background-color: brown;

        border: none;

    position: relative;
    float: left;
}

#box-red {

        width: 65px;
    height:65px;

    background-color: red;

        border: none;

    position: relative;
    float: left;
}

#box-white {

        width: 65px;
    height:65px;

    background-color: white;

        border: none;

    position: relative;
    float: left;
}

#box-black {

        width: 65px;
    height:65px;

    background-color: black;

        border: none;

    position: relative;
    float: left;
}

#box-pink {

        width: 65px;
    height:65px;

    background-color: pink;

        border: none;

    position: relative;
    float: left;
}
        </style>
    <h1>YOU HAVE CHOOSEN THE ARROWHEAD DESIGN</h1><br><br>

            If you are viewing this page using<br>
            Internet Explorer 8 or earlier,<br>
            please except or apologies.<br>
            We are aware that the painting function<br>
            is not working in these browsers and we<br>
            are working on the problem.<br>
                Thank You!<br><br><br>



        <h2><b>NOW CHOOSE YOUR TYPE OF BOARDS</b></h2> 

        <br>
    <br>

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">



<input type="hidden" name="on0" value="BOARD TYPE">

<select name="os0">

    <option value="REGULATION SIZE">REGULATION SIZE ( Most common - also used for tournament play) $85.00 USD</option>

    <option value="TOURNAMENT STYLE">TOURNAMENT STYLE ( All four sides closed when set up ) $130.00 USD</option>
    <option value="MEDIUM SIZE">MEDIUM SIZE (1/2 scale 12&quot; x 24&quot; - comes with ten 3&quot; bags) $45.00 USD</option>

    <option value="MINI BOARDS">MINI BOARDS  ( 6&quot; x 12&quot; Table Top - with ten 1-1/2&quot; bags) $30.00 USD</option>

</select>
<input type="hidden" name="on1" value="BOARD DESIGN">

<input type="hidden" name="os1" value="ARROWHEAD">

        <br>
    <br>


        <h2>NOW, LET'S PAINT YOUR BOARDS</h2><br>
        <h1><font style="color: red">Please use the color chart below.</font></h1>

        <br>
    <br>

                <div id="container">

        <div id="boardleft">

                <div id="box-a">

    <span Id="arrow">



</span>




    <span Id="arrow2">



</span>


            <div Id="circle">


</div>
            </div>



</div>





    <span id="boardleft">

    <b><u><h3>FIELD 1 COLOR</h3></u></b><br><br>

        <input type="hidden" name="on2" value="FIELD 1 COLOR">      

<h3>
<select name="os2">

<option name="os2" value="">
<option name="os2" value="GREY" onclick="colorchange1()"> 1</option>

<option name="os2" value="ORANGE" onclick="colorchange2()"> 2</option>

<option name="os2" value="YELLOW" onclick="colorchange3()"> 3</option>

<option name="os2" value="GREEN" onclick="colorchange4()"> 4</option>

<option name="os2" value="BLUE" onclick="colorchange5()"> 5</option>

<option name="os2" value="BROWN" onclick="colorchange6()"> 6</option>

<option name="os2" value="RED" onclick="colorchange7()"> 7</option>

<option name="os2" value="WHITE" onclick="colorchange8()"> 8</option>

<option name="os2" value="BLACK" onclick="colorchange9()"> 9</option>

<option name="os2" value="PINK" onclick="colorchange10()">10</option>

</select>
</h3>

    </span>

        <div id="boardright">


                <div id="box-a2">

    <span Id="arrow-a">



</span>




    <span Id="arrow-a2">



</span>



            <div Id="circle">


</div>
            </div>



</div>




    <span id="boardright">

    <b><u><h3>FIELD 2 COLOR</h3></u></b><br><br>

        <input type="hidden" name="on3" value="FIELD 2 COLOR">


<h3>
<select name="os3">


<option name="os3" value="">
<option name="os3" value="GREY"  onclick="changearrow1()"> 1</option>

<option name="os3" value="ORANGE"  onclick="changearrow2()"> 2</option>

<option name="os3" value="YELLOW"  onclick="changearrow3()"> 3</option>

<option name="os3" value="GREEN"  onclick="changearrow4()"> 4</option>

<option name="os3" value="BLUE"  onclick="changearrow5()"> 5</option>

<option name="os3" value="BROWN"  onclick="changearrow6()"> 6</option>

<option name="os3" value="RED"  onclick="changearrow7()"> 7</option>

<option name="os3" value="WHITE"  onclick="changearrow8()"> 8</option>

<option name="os3" value="BLACK"  onclick="changearrow9()"> 9</option>

<option name="os3" value="PINK"  onclick="changearrow10()">10</option>


</select>
</h3>
    </span>

        <span id="colorchart">




            <div id="box-grey"><p class="numbers_black">1</p></div>
            <div id="box-orange"><p class="numbers_black">2</p></div>
            <div id="box-yellow"><p class="numbers_black">3</p></div>
            <div id="box-green"><p class="numbers_black">4</p></div>
            <div id="box-blue"><p class="numbers_white">5</p></div>
            <div id="box-brown"><p class="numbers_white">6</p></div>
            <div id="box-red"><p class="numbers_black">7</p></div>
            <div id="box-white"><p class="numbers_black">8</p></div>
            <div id="box-black"><p class="numbers_white">9</p></font></div>
            <div id="box-pink"><p class="numbers_black">10</p></div>

          </span>



</div>

1 个答案:

答案 0 :(得分：1)

这可能不是一个完整的答案，因为如上所述，问题并未对问题进行太多的解决。尽管如此... 的

问题的至少一部分是，您要对onchange元素使用SELECT事件，而不是onclick元素OPTION元素SELECT 1}}。

以下是指向 jsfiddle demo 的链接：

  • 第1组将在Chrome和Firefox中显示一个消息框
  • Set 2只会在Firefox中显示一个消息框（至少在我正在使用的版本中）

（抱歉，没有测试IE）

更新：如果您愿意使用和学习jQuery，可以使用另一个 jsfiddle demo 进行颜色选择，因为我认为您需要它。< / p>

相关问题
最新问题