1. 首頁
  2. 問答
  3. 以下顏色更改功能在IE9和FF中正常工作，但不在早期IE或CHROME中

以下顏色更改功能在IE9和FF中正常工作，但不在早期IE或CHROME中

2012-08-28 40 views
1

//以下功能會更改CSS呈現圖像中的JavaScript代碼顏色，它只在IE9中工作，並且FF有針對此的黑客入侵或者是代碼頁中的東西可以在http://www.cornholeny.com/c_y_b_arrowhead.php處看到。 //以下顏色更改功能在IE9和FF中正常工作，但不在早期IE或CHROME中

<!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>

來源

2012-08-28 Corn Hole LI

+0

歡迎來到Stack Overflow。我不知道問題是什麼，但是我會說如果你有一個'colorChange（c）'函數需要一個參數來表示需要什麼顏色，你的代碼將會是_much_ neater。將它傳遞給所選選項元素的'value'屬性或具有所需顏色的字符串。 – nnnnnn

+1

請儘量減少HTML/CSS/JavaScript以展示您的問題。此外，如果您在http://jsfiddle.net/或http://jsbin.com/上提供了關於您的代碼的鏈接，那麼我們就可以在不保存到我們的計算機的情況下更改代碼。 –

+0

嘿邁克，我對這一切都很陌生，所以請原諒我的無知。 –

回答

1

這可能不是一個完整的答案的問題，如前所述，並沒有太大的縮小的問題。儘管如此...

至少有一部分問題是，你要使用的onchange事件爲您SELECT元素，而不是onclick在SELECT內OPTION元素。

下面是一個jsfiddle demo鏈接：

  • 設置1將顯示在Chrome和Firefox的一個消息框
  • 集2將只顯示在Firefox（一個消息框，至少在版本我「M使用）

（對不起，沒有測試IE）

UPD吃了：如果你願意使用和學習jQuery，這裏是另一個，它會根據我的需要進行顏色選擇。

來源

2012-08-29 02:52:31 Ben

+0

@ user1630983根據你的評論，「有一個原因，我用onclick，但我不記得爲什麼，我認爲onchange在IE或類似的東西沒有工作」 - 你可能想看看像[jQuery]（ http://jquery.com/）不用擔心瀏覽器特定的行爲。像jQuery這樣的庫隱藏了瀏覽器之間的許多差異 - 一旦你學習它，它也提供了許多其他的好處。 – Ben

+0

爲了縮小這個問題，顏色變化事件在IE 9以前的版本中不起作用，也沒有在CHROME中做過的工作，我沒有在netscape中測試過。另外，CSS循環在Chrome和早期IE中顯示爲正方形。 JSLINT說javascript是有效的，所以我想所有的問題或在CSS。這可能是嗎？ –

+0

好的，嘗試將onclick更改爲onchange，並且它在任何瀏覽器FF IE或CHROME中都不起作用。 hmmmmm –

相關問題

 相關問題