JavaScript中，有麻煩改變元素的風格

所以這是我的索引文件：JavaScript中，有麻煩改變元素的風格

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta http-equiv="pragma" content="no-cache"/> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
     <meta charset="utf-8"/> 

     <title>TEST</title> 

     <style> 
      body { 
       background: #000000; 
       color:#cccccc; 
       margin: 0px; 
       padding: 0px; 
       border: 0px; 
      } 
      canvas { 
         image-rendering: optimizeSpeed; 
         -webkit-interpolation-mode: nearest-neighbor; 
         -ms-touch-action: none; 
         margin: 0px; 
         padding: 0px; 
         border: 0px; 
      } 
      :-webkit-full-screen #canvas { 
       width: 100%; 
       height: 100%; 
      } 
      div.gm4html5_div_class 
      { 
       margin: 0px; 
       padding: 0px; 
       border: 0px; 
      } 

      div.gm4html5_login 
      { 
       padding: 20px; 
       position: absolute; 
       border: solid 2px #000000; 
       background-color: #404040; 
       color:#00ff00; 
       border-radius: 15px; 
       box-shadow: #101010 20px 20px 40px; 
      } 
      div.gm4html5_cancel_button 
      { 
       float: right; 
      } 
      div.gm4html5_login_button 
      { 
       float: left; 
      } 
      div.gm4html5_login_header 
      { 
       text-align: center; 
      } 

      :-webkit-full-screen { 
       width: 100%; 
       height: 100%; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="gm4html5_div_class" id="gm4html5_div_id"> 
      <canvas id="canvas" width="320" height="480"> 
       <p>Your browser doesn't support HTML5 canvas.</p> 
      </canvas> 
     </div> 

     <script type="text/javascript" src="html5game/TEST.js?GPJZB=444106034"></script> 
    </body> 
</html>

我似乎無法改變的div.gm4html5_div_class使用JS的風格。我嘗試了一堆東西，但沒有運氣。

任何人都可以幫助我嗎？另外請注意，這可能是因爲我不知道有足夠的瞭解JS ...

來源

2016-08-04 kingsushi001

請包括您嘗試過/目前正在嘗試更改'div.gm4html5_div_class'' – haxxxton

的js「我嘗試了一堆東西......」名字？ – smarx

您可以使用document. querySelector這個

document.querySelector(".gm4html5_div_class").style.background = 'red'

body { 
 
\t background: #ffffff; 
 
\t color:#cccccc; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t border: 0px; 
 
} 
 
canvas { 
 
\t image-rendering: optimizeSpeed; 
 
\t -webkit-interpolation-mode: nearest-neighbor; 
 
\t -ms-touch-action: none; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t border: 0px; 
 
} 
 
:-webkit-full-screen #canvas { 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 
div.gm4html5_div_class 
 
{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t border: 0px; 
 
\t background: green; 
 
} 
 

 
div.gm4html5_login 
 
{ 
 
\t padding: 20px; 
 
\t position: absolute; 
 
\t border: solid 2px #000000; 
 
\t background-color: #404040; 
 
\t color:#00ff00; 
 
\t border-radius: 15px; 
 
\t box-shadow: #101010 20px 20px 40px; 
 
} 
 
div.gm4html5_cancel_button 
 
{ 
 
\t float: right; 
 
} 
 
div.gm4html5_login_button 
 
{ 
 
\t float: left; 
 
} 
 
div.gm4html5_login_header 
 
{ 
 
\t text-align: center; 
 
} 
 

 
:-webkit-full-screen { 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<div class="gm4html5_div_class" id="gm4html5_div_id"> 
 
\t <canvas id="canvas" width="320" height="480"> 
 
\t \t <p>Your browser doesn't support HTML5 canvas.</p> 
 
\t </canvas> 
 
</div>

注：的實際背景顏色div是（在CSS中），使用javascript將背景更改爲red

她e是工作Demo

來源

2016-08-04 08:32:44

這是在行嗎？ –

這個對我很好。非常感謝你的幫助。 – kingsushi001

您可以使用JavaScript更新類List。

var element = document.getElementById("YourDivsId"); 
element.classList.add("YourClass");

來源

2016-08-04 08:40:13 RemanBroder

您可以通過不同方式選擇目標DOM元素。例如使用

var ele = document.getElementsByClassName('gm4html5_div_class');

這裏的返回值與給定類節點列表。所以要改變你必須使用一個循環，並改變個別元素風格的每個元素的風格，

for (var i=0; i<ele.length; i++) { 
    ele[i].style.backgroundColor = "#e3e3e3"; 
}

另一種選擇

var ele = document.querySelector(".gm4html5_div_class");

返回值的C 姑娘的冷杉出現，所以在這裏你可以很容易地改變返回的一個元素的樣式。

，如果你想也選擇與給定類的所有元素，你可以使用

var ele = document.querySelectorAll(".gm4html5_div_class");

和循環每個元素改變風格。

來源

2016-08-04 09:28:58 Kal

JavaScript中，有麻煩改變元素的風格

回答

相關問題